1.1CSS重点总结
1.1.1 选择器
1.1.2 盒子模型
1.1.3 浮动
1.1.4定位
1.2CSS介绍
概念： 层叠样式表或者级联样式表（Cascading Style Sheets）
层叠：CSS的特性
CSS的作用： 设置网页结构样式（改变html），通过CSS给html标签设置属性达到改变标签样式。
CSS书写位置介绍：
内嵌式写法：
外链式写法：
行内式写法：
1.3 内嵌式写法：
内嵌：将CSS文件放到htm文件中设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*在这里面写CSS代码就是内嵌式写法*/ </style> </head> <body> </body> </html>
1.3.2外联式写法
新建一个CSS文件
使用link标签将外部的css文件引入页面
注意:一个页面可以引入多个样式表
1.3.2行内式写法
尽量不用
<!-- 行内式写法 --> <p style="color: red;font-size: 40px;font-weight=700">文字</p>
1.4CSS语法
选择器{属性: 值; 属性: 值;}
选择器： 选择标签的过程
标签选择器：
类选择器：
ID选择器：
通配符选择器：
交集选择器（标签指定式）：
后代选择器：
子代选择器：
并集选择器：
补充的选择器（c3）：
伪类选择器：
属性选择器：
伪元素选择器：
1.5.1常用的选择器属性
color： 前景色（文字颜色）、
background-color 背景色
font-size 设置文字大小
width设置宽度
height 设置高度
text-align:left |center |right 内容（文字图片）居中显示（注意：该属性只能给块级元素设置）
text-indent: 2em; 首行缩进两个汉字
1.5.1.1单位介绍
px 像素
em 1em=一个文字大小
1.5.1.2 颜色的表示方式
直接设置颜色的名称 red,green,pink...
使用十六进制表示 #0-f
使用三原色表示:
rgb()
r: red (0-255)
g: green (0-255)
b: blue (0-255)
使用RGB表示颜色：rgb(23,56,89);
半透明效果：rgba(r,g,b,a) a 0-1 例子：
background-color:rgba(0,0,0,.5);
使用opactiy实现半透明：(如果放在p等标签内，连文字也会变半透明)
background-color:red;
opacity: .5;
解决ie低版本不支持：
filter:Alpha(opacity=50); /*IE8以及更早的浏览器*/
1.5.2标签选择器
html 标签名 {属性: 值;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*标签选择器*/ p{ color: red; /*改变文字颜色*/ font-size: 50px; /*改变文字大小*/ background-color: pink; /*改变背景颜色*/ width: 300px; /*设置宽度*/ height: 300px; /*设置高度*/ } div{ color: blue; font-size: 30px; } </style> </head> <body> <p>段落文字</p> <div><p>div中的文字</p></div> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> </body> </html>
1.5.3类选择器
.自定义类名{ 属性: 值;}
类选择器的特点: 一个类样式可以被多个标签同时调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*类选择器 通过.自定义类名，定义一个类样式*/ .p_red{ color: red; } </style> </head> <body> <p class="p_red">段落文字1</p> /*标签通过class属性调用类样式*/ <p>段落文字2</p> <div>div1</div> <div>div2</div> </body> </html>
一个标签可以同时调用多个类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*类选择器*/ .p_red{ color: red; } .p_green{ color: green; } .publc{ font-size: 30px: } </style> </head> <body> <!-- public选择器式公共的选择器 --> <p class="p_red publc">段落文字1</p> <div class="p_green publc">div1</div> </body> </html>
类选择器的命名规范
合法类名：
a.不能用纯数字或者数字开头定义类名
b.不推荐使用汉字定义类名
c.不能使用特殊字符或者使用特殊字符开头定义类名
d.不推荐使用标签名定义类名
1.5.4 Id选择器(实际开发不建议使用)
语法： #自定名称{属性: 值;}
使用: 首先通过#定义一个id选择器样式 #p_color{color: red;}
标签通过id属性调用id样式
<p > </p>
id选择器与类选择器的区别：
页面中标签的id值必须唯一
一个标签只能调用一个id样式
1.5.5通配符选择器
语法：
*{属性: 值;}
特点： 该选择器会将页面中的所有标签都选中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*通配符选择器 */ /*样式初始化的时候用*/ *{ font-size: 16px; font-family: 宋体; } </style> </head> <body> <div class="one">123</div> <div class="one">456</div> <span>789</span> </body> </html>
1.5.5.1交集选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*交集选择器： 标签选择器永远放在最前面*/ p.abc{ color: skyblue; } </style> </head> <body> <p class="abc">年前</p> <p>年轻</p> <h1>物理</h1> <h2>化学</h2> </body> </html>
1.5.6 font 属性介绍
font-size 文字大小
font-weight: normal; 文字加粗效果
700；文字加粗
bold 文字加粗
400； 文字正常显示
font-style: 设置文字是否斜体显示
normal； 默认正常显示
italic； 斜体显示
font-family : 字体对应的名称（宋体等等）/字体对应的英文方式/字体对应的unicode--》设置文字字体
注意：font-fmaily 一次可以设置多个字体，字体与字体之间用逗号隔开
设置字体要设置常用的字体
字体对应的unicode获取方法
line-height:设置文字行高
1.5.7font 属性联写
font: font-weight font-style font-size/line-height font -family ---> font: 700 italic 30px/20px 微软雅黑
注意：1.属性联写中，必须设置font-size 和 font-family
2.在属性联写中，font-size 必须 放到font-family前面设置
3.如果font的属性全部要写，那么按照上面的例子写
1.5.8 复合选择器
标签指定式选择器
标签名.类名{ 属性: 值;} 或者 标签名#id名{属性:值;}
关系: 既....又.....
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .one{ color: red; } /*标签指定式选择器*/ div.one{ color: green; } div#two{ color: pink; } </style> </head> <body> <div class="one">div中的文字</div><!-- 变绿 --> <p class="one">p中的文字</p> <div class="two" id="two">div中的文字</div><!-- 变粉色 --> <div class="one two">div中的文字</div><!-- 变绿 --> </body> </html>
1.5.9后代选择器
注意: 后代选择器 标签之间必须式嵌套关系 。
选择器与选择器之间必须要用空格隔开
后代选择器只能选择后代元素
语法：选择器 选择器 {属性：值；}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .father .son{ color: skyblue; } .father .child .small { color: pink; } </style> </head> <body> <div class="father"> <p class="son">儿子</p> <div class="child"> <p class="small">孙女</p> </div> </div> </body> </html>
1.5.10 并集选择器
语法： 选择器，选择器 {属性：值；}
注意： 1.选择器与选择器之间必须用逗号隔开
2.选择器标签之间的结构可以是任意的一种关系（并列或者父子等等都可以）
1.5.11补充
子代选择器 语法：选择器>选择器{属性: 值;}
注意：子代选择器之间必须是嵌套接结构，子代选择器只能选择直接后代元素，后代选择器可以选择所有的后代元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div>span{ color: red; } </style> </head> <body> <div class="one"> <span>直接后代或者直接子代</span> <p classs="two"><span>后代元素</span></p> </div> <p class="two">没有父元素的p</p> </body> </html>