css的认知与样式

 

目录

1. 介绍css

2. CSS语法

3. CSS注释

4. CSS中的颜色值

5. CSS长度单位

6. html引入CSS的三种方法

6.1 行内样式（内联样式）

6.2   内嵌样式

6.3 外部样式

7 选择器

7.1 标签选择器

7.2 类选择器

7.3 ID选择器

7.4 通配所有元素

7.5 分组选择器

7.6 选择器的优先级

7.8选择器的权重

7.9  最⾼权重

7.10 css三⼤特性

7.10.1 层叠性

7.10.2 继承性

7.10.3 优先级

1. 介绍

 CSS是Cascading Style Sheets的英文缩写,即层叠样式表

 Html【Hyper Text Markup Language】

   CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).

   CSS是用于布局与美化网页的

   CSS能实现内容与样式的分离，方便团队开发

   CSS是由W3C的CSS工作组产生和维护的

2. CSS语法

CSS 由选择器、属性、属性值组成

3.css注释

/*     */

快捷键ctrl +/

4.css的颜色值

4.1 用英文字母表示

4.2 用十六进制表示(0~f)

从1到9用数字 10到15用英文字母从a开始

用6位表示颜色

用3位表示颜色

4.3用rgb表示颜色(0~255)

r表示红色  g表示绿色 b表示蓝色

4.4 用rgba表示颜色

a表示 透明度  0 代表完全透明  1代表不透明  0.5 代表半透明

r表示红色  g表示绿色 b表示蓝色

5.css长度单位

5.1 像素单位px

宽为100px

5.2 百分比尺寸

宽为50% 占父元素的50% 以父元素为参照   没有父元素 就以祖先为参照

5,.3 em 倍数

宽为1倍  以父元素为参照

5.4 rem 根倍数

以html为参照   宽为1倍的HTML

6.css的引入方式

6.1 行内样式（内联样式）

行内样式权重最大

6.2   内嵌样式

把css样式写入style

此内嵌方式比行内样式权重低一些

6.3 外部样式

要先创建一个css文件 把样式写到css文件里面 然后用link进行外部引入

此引入的权重比内嵌样式低

6.4  引入的优先级

行内样式>内嵌样式>外部样式

实现就近原则

7.选择器

7.1 标签选择器

以标签名为开头的是标签选择器

7.2 类选择器

以.开头的是类选择器

7.3 ID选择器

以#开头的为ID选择器

7.4 通配所有元素

*是统配符  整个页面都可以使用 也是权重最低的

7.5 分组选择器

表示在同一个等级时可以用分组选择器

标签与标签之间用逗号隔开

7.6 选择器的优先级

行内> id选择器>类选择器>标签选择器>统配选择器

7.8选择器的权重

　　行内 权重为1000

id 选择器为100

类选择器伪类和属性选择器为10

标签选择器伪类和属性选择器为1

统配选择器为0

7.9 最⾼权重

     !important 重要的

7.10 css三⼤特性

7.10.1 层叠性

         所谓层叠性是指多种CSS样式的叠加

         层叠性是浏览器处理冲突的⼀个能⼒,如果⼀个属性通过两个相同选择器设置到同⼀个元素上，那么这个时候⼀个属性就会将另⼀个属性层叠掉（覆盖）

         样式不冲突，不会层叠

         样式冲突；就会层叠； 按照优先级，决定哪个样式⽣效

7.10.2 继承性

          CSS 的继承特性指的是应⽤在⼀个标签上的⼀些 CSS 属性被传到其⼦标签上；就是被⼦标签继承

          不是所有的样式都会被⼦标签继承， 字体类font- ; ⽂本类 text- ； 颜⾊color ； ⾏⾼line-height 等可以被继承

          a标签⽐较特殊，没有办法通过继承改变a标签的字体颜⾊

7.10.3 优先级

           权重的优先级，决定哪个样式最终⽣效

            权重相同： 后者⽣效； 权重不同： 权重⾼者⽣效