前端CSS的简单学习
1：什么是CSS
Cascading style Sheet :层叠级联样式表
CSS：字体，颜色，边距，宽度，背景图片。。。
2：CSS的快速入门语法（推荐引入css的样式）建议使用独立的css文件，方便项目的维护以及代码的清楚性
3：四种css导入的方式
样式的优先级的问题：就近原则
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> <!-- --> h1 { color: red; } </style> <!-- 导入式--> <link rel="stylesheet" href="我的第一个css程序/css/style.css"> <!-- 导入式的另外一种写法 (不推荐使用,是在css2.1中出现的)--> <style> @import "我的第一个css程序/css/style.css"; </style> </head> <body> <!--行内样式：在标签元素中，编写一个style属性，编写样式--> <h1 style="color: black">我是标题</h1> </body> </html>
4：CSS中的选择器
作用：选择页面上的某一个或者某一类元素
1：标签选择器：选择一类标签
2：类选择器 class：选择所有class属性一致的标签
3：id选择器：全局唯一
<style> /*1：标签选择器会选择这个页面所有的标签*/ h1 { color: red; font-size: 18px; } /*2：类选择器的格式：.class的名称{} 好处： 可以多个标签归类，是同一个class */ .xst { color: blue; background: red; } /*3：id选择器的格式：#id名称{} 好处：id选择器全局必须唯一 */ /*id选择器>class选择器>标签选择器*/ #xxxx{ color: black; } </style>
5：补充说明一些高级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <style> /*后代选择器 body p{} */ body p { background: red; } /*子选择器 body>p：表示body后面的第一代元素 */ body > p { background: blue; } /* 相邻兄弟选择器：只有一个，一般是向下的一个元素*/ .xst + p { background: blue; } /*通用兄弟选择器：当前选中元素的向下的所有兄弟元素*/ .xst ~ p { background: black; } . </style> </head> <body> <p>p1</p> <p class="xst">p2</p> <p>p3</p> <ul> <li> <p>p4</p> </li> <li> <p>p5</p> </li> <li> <p>p6</p> </li> </ul> <p>p7</p> </body> </html>
6：结构伪类选择器（在页面中存在冒号的css叫做伪类选择器）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- --> <style> /*ul的第一个子元素*/ ul li:first-child { background: palevioletred; } /* ul的最后一个元素*/ ul li:last-child { background: blue; } /* 选中p1：定位到父元素，定位到父元素,选择当前p元素的父级选择，选中当前 父级元素的第一个，并且类型是当前元素才生效 nth-child(a):选择当前父元素下的第a个元素 */ p:nth-child(1) { background: red; } /*选中当前元素的父元素的第一个类型为p的元素，设置背景色为aqua*/ p:nth-of-type(1) { background: aqua; } </style> </head> <body> <h1>1111</h1> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </body> </html>
7：属性选择器（最常用的）
<!--属性选择器（id+class结合使用） 格式：a[id]{}：表示a标签中的id选择器 =：表示绝对等于 *=：表示包括的 ^=：表示以这个开头 $=：表示以这个结尾 -->
8：CSS中的样式
（1）字体样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> /* font-size：表示字体的大小 font-family：表示字体的格式 font-weight：字体的粗细（bold加粗） color：字体颜色 em：表示缩进，一个tab表示两个em */ #nm { font-size: 20px; font-family: 楷体; font-weight: bold; } </style> <body> <!--span：span标签一般用于显示比较突出的字--> <span id="nm">重点</span>突出的字 </body> </html>
（2）文本样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本样式</title> </head> <!--补充说明颜色的使用 颜色： 单词 RGB 0-F RGBA A:0-1 text-align center：居中 text-indent：表示首行缩进 line-height：行高（行高和块的高度一致，就可以上下居中） text-decoration：underline（下划线）line-through（中划线）overline（下划线） --> <style> h1 { text-align: center; } .p1 { text-indent: 2em; } .p2 { line-height: 200px; text-indent: 2em; } </style> <body> <h1>故事介绍</h1> <p class="p1">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，内海和边海的水域面积约470多万平方千米。海域分布有大小岛屿7600多个，其中台湾岛最大，面积35798平方千米 [2] 。中国同14国接壤，与8国海上相邻。省级行政区划为23个省、5个自治区、4个直辖市、2个特别行政区。 [2] </p> <p class="p2"> [5] ，国徽内容为国旗、天安门、齿轮和麦稻穗 [6] ，通用语言文字是普通话和规范汉字 [7] ，首都北京 [8] ，是一个以汉族为主体、56个民族共同组成的统一的多民族国家。</p> </body> </html>
（3）超链接伪类（a:hover）表示鼠标悬停的状态
（4）ul-li的一些补充说明
/*line-style:
none：去掉原点
circle：圆心
.....
*/
ul li{
list-style: none;
}
（5）盒子模型以及边框的使用
1：什么是盒子
margin：外边距（上下左右）通常用margin：0 auto 来居中，auto：自动对齐方式
padding：内边距
border：边框
（a）粗细，样式，颜色（常用：1px,solid,red）
2：盒子的计算方式：margin+border+padding+内容宽度
（6）浮动
1：display
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- display: block：块元素 inline：行内元素 inline-block：是块元素，但是可以内联 none：消失 --> <style> div { width: 100px; height: 100px; border: 1px solid red; display: inline-block; } span { width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style> </head> <body> <div>div快级元素</div> <span>span行内元素</span> </body> </html>
2：float（左右浮动）
（6）
1：z-index：表示一个层级问题，默认是0，最高无限制，
2：背景透明度，opacity：0.5
浙公网安备 33010602011771号