HTML基础复习3

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

CSS

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

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

CSS中的选择器

HTML标签选择器
类选择器

在标签上使用class属性为标签起个类名，在CSS中使用.类名
id选择器

在标签上使用id属性为标签起个id值，在CSS中使用#id值，尽量不要让id重复
包含选择器

.s1 .s2{} s1下的所有s2选择器
群组选择器

使用,列出所有需要改变样式的标签
伪选择器

以：连接的选择器

:link ：未访问时的状态

:visited ：已访问的连接的状态

:hover ：鼠标移上去时的状态

:active ：激活时的状态
通配选择符

{}

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

可以在相应的标签上添加（在HTML元素内部）
嵌入式样式表在head中添加style子标签
引入式（在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; 固定背景图片（不随滚轮的动作而变动位置）