时间：2021-07-01 10:21:17 帮助过：94人阅读
c.内联样式表：
属性名为style 举例:
3.CSS中的选择器：
A:简单选择器；
a:元素选择器；元素 { 属性: 值; }
b:类选择器；.类名 { 属性: 值; } 注意有个点。
c:ID选择器；#id名 { 属性: 值; } 注意有个#，ID选择器只能被引用一次，而类选择器可以被多次引用。
d:伪类选择器；（有四个状态） 1、a:link{ } (未访问的链接)
2. a:visited{ }(已访问的链接)
3. a:hover{ }(鼠标在链接上)
4. a:active{ }(激活链接)
e:伪元素选择器；1, p:first-line{ }
2, p:first-letter{ }
4.复合选择器：
a:交集选择器：交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。
其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格。
eg:p.special{ }
h3.cls{ }
(以上选择器匹配)
b:并集选择器：
eg: h1,h2,h3,h4,h5,h6{ }
h2.special,.special,#one{ }
c:后代选择器：(继承最近的)后代选择器产生的影响不仅限于元素的"直接后代"，而且会影响到它的"各级后代"
5.理解样式表的层叠:
层次的优先级别从小到大依次为：
外部样式表
嵌入式样式表
内联样式
如果是同一个样式表中不同选择器，优先级别从小到大依次为：
元素选择器
类别选择器
ID选择器
CSS的基本属性---文本样式
1.长度单位 1.px 2.em
2.颜色定义 color
3.设置字体样式 设置文字的字体 font-family："黑体";
设置字体倾斜效果 font-style：Italic；
设置文字加粗效果 font-weight:bold; （粗体) font-weight:bolder; (加粗)
font-weight:100(范围100-900，数字越大字体越粗)
设置英文字母大小写转换 text-transform: capitalize; (单词首字母大写)
设置控制文字大小 font-size:..px/..%/..em
设置文字的装饰效果 text-decoration: none/underline/line-through(删除线)/overline(顶线)；
4.设置段落样式 设置段落首行缩进 text-indent：..em(..个标准字符大小的距离)/..px；
设置字词间距离 letter-spacing(字母):..px; word-spacing（单词）:..px;
设置段落内部的文字行高 line-height:
控制文本的水平位置 text-align:left/right(右对齐)/center（居中）/justify（两端对齐）
设置文字与背景颜色 color:...; background-color:...;
设置段落的垂直对齐方式 vertical-align:...;(只对表格单元格中的元素起作用)
css的基本属性---图像样式
1.设置图片边框：border-width:(粗细） ; border-color:（颜色） ; border-style:（线性） ;
不同的边框可以设置不同的样式，eg:border-left-style、 border-top-width .... solid实线
2.图片的缩放： width height （百分比，像素）
3.图文混排：
文字环绕：float (浮动)
图片与文字对齐方式：水平对齐 text-align:
垂直对齐 vertical-align:
4,。设置背景颜色与图像：background-color: background-image:url(地址)
可以使用background-repeat：来控制平铺，repeat：水平和垂直方向平铺，默认值。
no-repeat：不平铺。
repeat-x：只沿水平方向平铺。
repeat-y：只沿垂直方向平铺。
5.设置背景图像位置：background-position：（ 可以设置两个值 eg:left top）
6.设置背景图片固定位置 ：background-attchment:fixed; 图片滚动： scroll
补充：去掉无序列表前的小圆点，list-style: none;
上标用 eg:图像样式
定位（查看position7）
1.绝对定位：（设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。）
position: relative；
top:..px;
left:..px;
2.相对定位: ( 绝对定位的元素的位置相对于最近的已定位的元素，
如果元素没有已定位的元素，那么它的位置相对于最初的包含块。)position：absolute;
top:..px;
left:..px;
css基本属性—表格样式（les8）
1.控制表格：cellspacing：列间距 cellpadding：列的内边距
border：表格边框 bgcolor：表格颜色 border-collapse:合并相邻列的边框线
border-spacing : 设置列的间距
设置表格宽度：table-layout:fixed(固定)或者auto(自动)
：表示表头 ：表示表内容 ：表示表尾 （顺序可以不一样，但一般还是按顺序）
2.设置鼠标经过时表格的样式：a:hover
3.CSS与表单：a:制作像文字一样的按钮
transparent(透明的) 设置背景透明
border:0px; eg:
b:制作多彩下拉菜单 select option
c:制作只有下划线的输入框 border:0px/none;
border-bottom:1px (粗细) dashed(线性) #000000(颜色);
补充：1.display:block(行级元素换成块级元素)/ inline(块级元素换成行级元素)
2.CSS3的选择器： :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
用CSS设置链接与导航菜单 （les9）
1.设置超链接样式： 在HTML中 在CSS中还可以用伪类选择器的四个样式 a:link(未访问) a:visited（已访问）。
a:hover（鼠标移上去） a:active（激活）
2.创建按钮式超链接：text-decoration: none; a:link{ } a:active{ }
(可以设置这些) background: ;
color: ;
border-right: px solid ;
border-bottom: px solid ;
border-left: px solid ;
border-top: px 。
3.制作荧光菜单： 应用无序列表，
,a:hover, ( 查 les9)。
4.控制鼠标（cursor）指针 . {cursor: } （查 属性下的其他 CSS 2.0 中文手册）。
5.设置项目列表格式： 可以用有序列表
与无序列表
用 list-style 来设置。
6.创建简单的导航菜单:
a:垂直排列菜单
很多时候会用上 list-style-type:none 其作用是去掉有序或无序列表前的数字或圆点。
b:横向菜单
实现横竖转换只需设置float:left即可，同时把宽度取消掉。
7.设置图片翻转效果:(指网页中的一个图片，在鼠标指针经过时换成另外一个图片。) 可以用hover.
补充CSS3的属性 rotate(角度)
效果：当鼠标移上去的时候，列表可以转动你设置的角度。（正为顺时针，负为逆时针，若是180度，可以看见字是倒立的。不能清楚的看见转动
，但可以看见字的变化）
transform（转换）:rotate（ 旋转；循环 使旋转；使转动；使轮流）(-20deg) ； deg:程度（degree）
（查看les9-5）
CSS的盒模型 （les 10）
1.盒子的概念：在CSS中，一个独立的盒子模型content（内容）、border（边框）、padding（内边距）和margin（外边距）4个部分组成。
一个盒子实际所占用的宽度或高度是由“内容+内边距+边框+外边距”组成的。
2.设置边框，内边距，外边距：
a 内边距（padding） padding属性可以设置1、2、3、4个属性值，分别如下：
设置1个属性值时，表示上下左右4个padding均为该值。
设置2个属性值时，前者为上下padding的值，后者为左右padding的值。
设置3个属性值时，第1个位上padding的值，第2个为左右padding的值，第3个为下padding得值。
设置4个属性值时，按照顺时针方向，依次为上、右、下、左padding的值。
b 外边距（margin） margin指的是元素与元素之间的距离 margin and padding 的设置时一样的。
3.盒子之间的关系：
标准的文档流：
标记与标记：p简单而言是一个区块容器标记，即
与