CSS重点总结
1.选择器
2.盒子模型
3.浮动
4.定位
CSS介绍 ( Cascading Style Sheets )
概念:层叠样式表或者级联样式表
层叠:CSS的特性
CSS作用:设置网页结构样式(改变html标签样式),通过CSS给html标签设置属性
达到改变标签样式。
CSS书写位置介绍:
内嵌式写法
外链式写法
行内式写法
内嵌式写法
内嵌:将css放到html文件设置,放在head标签里
CSS语法
选择器 {属性:值; 属性:值}
选择器:选择标签的过程
标签选择器:
类选择器:
ID选择器
通配符选择器
交集选择器(标签指定式)
后代选择器
子代选择器
并集选择器
补充选择器(c3):
伪类选择器 :目标选择器 空选择器 等
属性选择器
伪元素选择器
1.标签选择器
Html标签名{属性:值;}
常用属性:
color前景色(文字颜色)
设置内容(文字图片)对齐方式 text-align: left | center | right 注意该属性只能给块级元素设置
text-indet:设置首行缩进
background-color背景色
font-size 设置文字大小 文字大小数值px
width 设置宽度 height设置高度
p,div用逗号隔开可以都改变
2.单位介绍
px像素
em 1em=一个文字大小
3.颜色的表示方式
1.直接设置颜色的名称
2.使用十六进制表示 #0-f
3.使用三原色表示
rgb r:red g:green b:blue (0-255)
半透明
rgba(0,0,0,1) a取值0-1,a代表透明度 1代表不透明
rgba(0,0,0,0.5)
opacity实现半透明
文字也会实现半透明
结局IE低版本不支持
类选择器
.自定义类名 {属性:值;}
使用:
通过.自定义类名 定义一个类样式 .p_red{}
标签通过class书行调用类样式 <p class="p_red" ></p>
类选择其特点
一个类样式可以被多个标签同时调用
例如<p class="p_red p_green">文字1</p>
一个标签可以同时调用多个样类
类选择器命名规范
合法类名:不能使用纯数字或者以数字开头定义类名
不推荐使用汉字定义类名 不能使用特殊字符或以特殊字符定义类名
个人不推荐使用表签名定义类名
Id选择器
语法 #自定义名称{属性:值;}
使用 首先通过#自定义名称 定义一个 id选择器样式
#p_color{color:red;}
标签通过id属性调用id样式
<p id="p_color"></p>
id选择器与类选择器的区别:
1.页面中标签的id值必须唯一 例(不可以):<p id="color size">你好啊</p>
2.一个标签只能调用一个id样式
通配符选择器
*{属性:值;...}
特点:该选择器会将页面中所有的标签都选中
以前一般样式初始化的时候用,不同浏览器默认样式不同,就需要用通配符选择器
font属性介绍
font-size 文字大小
font-weight 文字加粗效果 属性值:normal(文字正常) | 700(文字加粗) | bold (文字加粗)|400(文字正常)
font-style 文字是否斜体显示 属性值:normal(正常显示)| italic(文字斜体显示)
font-family 设置文字字体
带双引号不带都可以
文字字体表示方式:直接设置字体对应的名称(宋体 黑体 幼圆)
设置字体对应的英文称呼
设置字体对应的unicode编码
注意:font-family 一次可以设置多个字体,字体与字体之间用,隔开
设置字体要设置常用字体 设置多个文字属性的作用:如果没有依次使用后面的文字属性
line-height 设置文字行高
font属性连写
font: font-weight font-style font-size/line-height font-family
注意:1.属性联写中必须设置font-size和font-family
2.在属性联写中font-size必须放到font-family前面设置
3.如果font属性联写中的属性都要设置,按照图片中的顺序设置
复合选择器
标签指定式选择器
语法:标签名.类名{属性:值;}
或者
标签名#id名{属性:值;}
关系:既。。。又。。。
后代选择器
注意:后代选择器标签之间必须是嵌套关系
选择器与选择器之间必须使用空格隔开
后代选择器只能选中后代元素
后代元素可以是直接后代也可以是间接后代
语法:选择器 选择器 {属性:值;}
并集选择器
语法:选择器,选择器,选择器{属性:值;}
注意:选择器与选择器之间必须用逗号隔开
选择器标签之间的结构可以是任意一种关系
补充知识(不需要重点掌握)
子代选择器
语法:选择器>选择器(属性:值;)
注意:
子代选择器必须是嵌套结构
子代选择器只能选中直接后代元素
后代选择器可以选中所有的后代元素
属性选择器
[属性名]{属性:值}
[id][class]{color: green;} 既。。。。又。。。。(同时满足)
[属性=值]{} 例如: [class="one"] {color:green;} 给属性赋值,同时满足
[属性^=字母] 例如:[class^=t]{color: black;} 选中以字母开始的标签
[属性$=字母] 例如:[class$=o] 选中以字母结束的标签
[属性*=字母] 例如:[class*=o]选中包含字母的标签
伪类选择器
结构伪类 语法: 选择器:first-child{属性:值;}
选择器:last-child{属性:值;}
选择器:nth-first-child{属性:值;}
选择器:nth-last-child{属性:值;}
选择器:nth-child(odd)(属性:值;)奇数
选择器:nth-child(even)(属性:值;)偶数
目标伪类
空伪类
排除伪类