CSS简介和总结

一、CSS的属性

1.1. 文字属性

1.1.1. font-style

规定文字样式的属性

  • normal: 正常的,默认就是正常的 快捷键: fs
  • italic: 倾斜的 快捷键: fsn

1.1.2. font-weight

规定文字粗细的属性

  • bold 加粗 快捷键: fwb
  • bolder 比加粗再粗一点 快捷键: fwbr
  • lighter 细 默认
  • 100-900之间整百的数字

1.1.3. font-size

规定文字的大小的属性,取值为任意的像素值
注意点:
通过font-size设置大小一定要带单位,也就是一定要写px

1.1.4. font-family

规定文字字体的属性,取值为电脑中的任意字体,企业开发中常见的有:宋体SimSun、黑体SimHei、微软雅黑 Microsoft YaHei

注意点:

  • 如果取值是中文,需要用双引号或者单引号括起来
  • 设置的字体必须是用户电脑里面已经安装的字体
  • 如果想给中文和英文分别设置单独的字体,那么英文字体必须写在中文的前面
  • 如果设置的字体不存在,那么系统会使用默认的字体来显示
  • 备用字体:font-family:"字体A", "字体B", "字体C", ......;其中,字体B、字体C都是字体A的备用字体。
  • 并不是名字是英文就一定是英文字体

文字属性连写

格式:font: style weight size family;
例如: font: italic bold 10px "楷体";

注意点:

  1. 在这种缩写格式中style和weight可以省略
  2. 在这种缩写格式中style和weight的位置可以互换
  3. 在这种缩写格式中所有的属性值是不可以省略的
  4. 在这种缩写格式中size和family的位置是不能随便乱放的

1.2. 文本属性

1.2.1. 文本装饰的属性

给文本添加装饰

取值 作用 快捷键
underline 下划线 tdu text-decoration: underline;
line-through 删除线 tdl text-decoration: line-through;
overline 上划线 tdo text-decoration: overline;
none 去掉超链接下划线 td text-decoration: none;

1.2.2. 文本对平对其的属性

设置水平对其的方式

取值 作用 快捷键
left ta text-align: left;
right tar text-align: right;
center tac text-align: center;

1.2.3. 文本缩进的属性

设置文本缩进 text-indent :2em; (快捷键:ti2e)

  • 其中em是单位,一个em代表缩进一个文字的宽度

1.3. 颜色属性

设置文字的颜色

通过rgb三原色进行设置颜色,每一个颜色通道的取值范围是0~255,其中如果有alpha通道,取值范围是0~1。

十六进制:

2 位代表一个颜色通道 #FFEE00代表:R: FF,G: EE,B: 00
CSS中只要16进制的颜色每两位的颜色值一样,那么可以简写为一位
#FFEE00 = #FE0

二、CSS选择器

2.1. 标签选择器

根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性

格式:

<style>
    标签名称 {
        key: value;
    }
</style>

注意点:

  • 标签选择器选中的是当前界面中所有的标签,二不能单独选中某一个标签
  • 标签选择器无论淫荡的多深都能够被选中
  • 只要是HTML中的标签就可以作为标签选择器

2.2. id选择器

根据指定的id名称找到对应的标签,然后设置属性。每个HTML标签都有一个属性叫做id,也就是说每个标签都可以设置id

格式:

<style>
    #id名称 {
        key: value;
    }
</style>

注意点:

  • 在同一个界面中id的名称是不可以重复的
  • 在编写id选择器的时候一定要在id名称前面加上#
  • id标签的名称只能由字母/数字/下划线组成,并且不能以数字开头,并且不能使用HTML已有的标签名称

2.3. 类选择器

根据指定的类名找到对应的标签,然后设置属性。每个HTML标签都有一个属性叫做class,也就是说每个标签都可以设置类名。

<style>
    .类名 {
        key: value;
    }
</style>

注意点:

  • 在同一个界面的class名称是可以重复的
  • 在编写class的时候一定要在class名称前面加上 . 符号
  • 类名的命名规范和id名称的命名规范一样。
  • 类名就是专门用来给CSS设置样式的
  • 在HTML中每个标签可以绑定多个类名
<!-- 绑定多个类名正确的写法 -->
<p class = "类名A 类名B 类名C ....">
<!-- 绑定多个类名错误的写法 -->
<p class = "类名A" class="类名B">

2.4. 类选择器和id选择器

标签属性class和标签属性id属性的区别:

  • id相当于个人身份证不能重复而class相当于人的名字可以重复
  • 一个HTML标签只能绑定一个id名词而可以绑定多个class名称

id选择器和class选择器的区别:

  • id选择器是以 # 开头
  • class选择器是以 . 开头

在企业开发中,一般情况下,id选择器用来给js代码使用,所以除非特殊情况不要用id选择器在css中使用设置样式。学会抽取公共的类,使用类属性给标签绑定类属性,然后统一给具有相同样式的标签设置同样的样式。

2.5. 后代选择器

找到指定标签的所有特定的后代标签,设置属性,用空格隔开来表示后代,并且可以一直通过后代延续下去。

/* 格式:*/
标签名称1 标签名称2 {
    key: value;
}

注意点:

  • 后代不仅仅是儿子,只要四放到指定标签中的都是后代
  • 后代选择器不仅仅可以使用标签名称,还可以使用其他选择器

2.6. 子元素选择器

找到指定标签中所有特定的直接子元素,然后设置属性,用>符号来链接,并且不能有空格。

/* 格式:*/
标签名称1>标签名称2 {
    key: value;
}

注意点:

  • 子元素选择器只会查找儿子,不会查找其他被嵌套的标签
  • 子元素选择器不仅仅可以使用标签名称,还可以使用其他选择器
  • 子元素选择器可以通过 > 符号一直延续下去

2.7. 后代选择器和子元素选择器

不同点:

  • 后代选择器使用空格作为连接符号,
  • 子元素选择器使用 >符号作为连接符号

共同点:

  • 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
  • 后代选择器和子元素选择器都可以通过鸽子的连接符号一直延续下去

在企业开发中,如果想选中指定标签中的所有特定的标签,那么就使用后代选择器。如果只想选中指定标签中的所有特定儿子标签,那么就使用子元素选择器。

2.8. 交集选择器

给多个选择器选中的标签中,相交的那部分标签设置属性。

/* 格式:*/
选择器1选择器2 {
    key: value;
}

注意点:

  • 选择器和选择器之间没有任何的链接符号
  • 选择器可以使用标签名称/id名称/class名称
  • 交集选择器由于其特殊性,在企业开发中用的并不多

2.9. 并集选择器

给多个选择器中的标签同时设置属性
```css

top Created with Sketch.