HTML基础复习3
阅读原文时间:2023年07月09日阅读:1

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标记

标记的前后不会换行