HTML基础复习3

CSS

可以理解为对HTML的一种补充

CSS由两部分组成：选择器、声明，声明中包含属性和值

CSS中的选择器

1. HTML标签选择器
2. 类选择器
   
   在标签上使用class属性为标签起个类名，在CSS中使用.类名
3. id选择器
   
   在标签上使用id属性为标签起个id值，在CSS中使用#id值，尽量不要让id重复
4. 包含选择器
   
   .s1 .s2{} s1下的所有s2选择器
5. 群组选择器
   
   使用,列出所有需要改变样式的标签
6. 伪选择器
   
   以：连接的选择器
   
   :link：未访问时的状态
   
   :visited：已访问的连接的状态
   
   :hover：鼠标移上去时的状态
   
   :active：激活时的状态
7. 通配选择符

• {}

在网页制作中运用CSS技术的几种方法

1. 可以在相应的标签上添加（在HTML元素内部）
2. 嵌入式样式表 在head中添加style子标签
3. 引入式（在css文件夹中）

CSS样式属性

文本属性

font-family:：设置字体

font-size:：设置字体大小 单位：px（像素）em（字符）

color:：设置字体的颜色

font-weight:：加粗

font-style:：字体样式 italic斜体

text-decoration:：设置文本修饰符 underline;下划线 line-through;删除线 none; 删除下划线（用在超链接上）

text-align:设置文本水平对齐方式 right;

块级标签：高度默认为内容的高度，但是它的宽度充满整个父容器，可以设置宽高。独立占用一行

行内标签：宽度和高度默认为内容的大小，无法设置宽高

text-indent:：首行缩进 2em;首行缩进两个字符

line-height:：行高，行与行之间的距离。如果是一行内容，就可以设置垂直居中（line-height:值设置为容器的高度）

列表属性

list-style-image: url ：设置列表项的图片

list-style-type: ：设置列表符号类型 decimal阿拉伯数字 none去掉列表符号

list-style-position：设置列表符号位置 inside内缩进 outside 默认

list-style: decimal inside可以一次性设置两个属性，decimal可以换为url

背景属性

background-color:设置背景颜色

background-image: url(路径);设置背景图片

background-repeat:no-repeat|repeat-x|repeat-y;设置背景图片是否平铺

background-position:x y设置背景图片显示的位置 第一个值代表从左到右的距离，第二个值代表从上到下的距离

background: black url() no-repeat 50% 50%;没有先后顺序

background-attachment:fixed;固定背景图片（不随滚轮的动作而变动位置）

span标记

标记的前后不会换行