CSS : 层叠式样式表 （cascade style sheet ）
可以控制网页上的各种标签的 颜色，字体，间距，边框...
css的格式：
1）行内样式 ： 在每一个标签的 内部加上样式,多个样式之间用 ; 隔开
缺点： 样式重复
格式： <标签 style=" 样式1；样式2；... ；样式n ">
2）内部样式表：在<head> </head> 里面写样式
优点： 可解决 样式重复的问题
格式：
<html>
<head>
<style> 多个样式 </style>
</head>
</html>
3) 外部样式表： 将样式代码单独写在一个 .css 的文件中，用 <link>标签导入
格式:
<html>
<head>
<link rel="stylesheet" href="css文件路径">
</head>
</html>
4) 样式属性：
颜色值： color
(1) 颜色的单词： red,blue,green,black ... (2) 红绿蓝三原色： rgb(0~255,0~255,0~255)
（3) 16进制的值来表示： #FF00FF (0~F)
背景：
background-color ：背景色 background-image: url (背景图片路径)
background-repeat: 控制背景图片如何重复 no-repeat(不重复) repeat-x repeat-y repeat(xy方向上都重复)
background-size: 110px 缩放背景图大小
字体样式：
font-size: 字体大小 单位 px (像素)
font-family: 字体名称： 宋体，楷体...
font-style: 字体格式
font-weight: bold; 粗体
文字修饰 text-decoration: 值 (line-through 贯穿线， underline 下划线)
对齐方式：
align ： left(左) center（中） right(右)
5）div 标签 ：容器标签，可以容纳其它标签
作用：1）页面布局， 2) 统一处理
6）宽高： weight: 宽度 px 单位像素 可以是 数值 ，也可以是 百分比 %
height: 高度 px 单位像素
7）边界： 可以把它们合并为一个写 border: blue solid 100%;
border-color: 颜色
border-style: 样式（实线等）
border-width: 宽度 border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框
8）内边距 ：标签和内容之间的间隙 padding
padding-top
padding-right
padding-bottom
padding-left
padding 可以同时控制4个方向上的内间距
padding : 10px 10px 10px 10px;
上 右 下 左
padding : 20px 5px;
上下 左右
padding : 10px
上下左右
9) 外间距： 同级标签与标签之间的距离 margin
margin-top
margin-right
margin-bottom
margin-left
10）盒子模型： 外边距（margin） > 边框（border） > 内边距（padding） > 内容
11) z-index : 代表该元素在z轴的位置，数字越大越向外, 要配合绝对定位使用
position:absolute; left:x坐标（向右）; top:y坐标(向下)
绝对定位
rgba(红, 绿, 蓝, 透明度) 透明度 0~1 0 表示完全透明， 1 表示不透明
选择器 { 样式 }： 根据指定的选择器去匹配标签，匹配到的标签就会应用该 样式
1） id 选择器： 根据指定的 id 去匹配标签
#id值{ 样式 } id值要唯一
2）class选择器： 根据指定的 class 去匹配标签
.class值 { 样式 }
3）元素选择器：根据指定的 标签 去匹配标签
标签名 { 样式 }
4）父子选择器： 最终选中的是子选择器匹配的标签，但必须满足条件：父标签要和父选择器匹配
父选择器 > 子选择器
5）后代选择器: 祖先选择器 后代选择器 (中间以 空格 隔开)
6）伪类选择器：
:hover 当鼠标悬浮在标签之上，算匹配
:nth-child（n） 当作为第n个孩子元素, n从1开始
:last-child 当作为最后一个孩子元素
选择器的优先级：
! important 用来提升某个样式的优先级
! important > style 行内样式 > id选择器（#id） > class选择器(.class) > 元素选择器
注意：
（1） 子标签可以继承父标签的样式，如果子标签定义了相同的样式，将会覆盖父标签的样式
（2） 同优先级的选择器，后 定义的会覆盖 前面 定义的样式
在网页之间重用样式
需要用到外部样式表， 可以把选择器，样式的定义放在一个 *.css 的文件当中（样式表文件）引入外部的样式表：
<link rel="stylesheet" href="路径/css文件名">
好处：
（1）可以更大程度地在多个网页间重用样式， 让网站的风格统一
（2）内部样式表可以实现本网页特殊的样式，采用覆盖的方法，可以覆盖掉外部样式表的样式
扫一扫
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
