当前位置:   article > 正文

【web前端HTML+CSS+JS】--- CSS学习笔记02

【web前端HTML+CSS+JS】--- CSS学习笔记02

一、CSS(层叠样式表)介绍

1.优势

2.定义解释

如果有多个选择器共同作用的话,只有优先级最高那层样式决定最终的效果

二、无语义化标签

div和span:只起到描述的作用,不带任何样式

三、标签选择器

1.标签/元素选择器

为标签添加样式

2.类选择器

只想选择部分标签进行控制,需要任意对标签进行分类,并分别加上class属性

3.ID选择器

作用于单个标签上

4.全局选择器

选择全部标签

5.属性选择器

6.子字符串匹配选择器

7.忽略大小写匹配选择器

8.伪类选择器

根据状态(普通/行为)分类,不是手动分类

(1)普通伪类选择器

比如永远动态的对第一个段落控制样式

(2)行为伪类选择器

比如被点击的链接,不同的行为可以设置不同的样式

9.关系选择器

(1)交集选择器

格式:标签.类值 (必须标签在前,否则会把标签名当作类名的一部分,产生歧义)

(2)并集选择器

格式:标签和类用逗号隔开,前后顺序无所谓

(3)后代选择器

格式:父标签 空格 子标签

选择所有的子元素,包含直接和间接

(4)子代选择器

格式:父标签 >子标签

只控制一级子元素

(5)兄弟选择器

格式:某个标签+相邻的标签

只会对相邻的标签进行控制,样式对本身不起作用

格式:某个标签~相邻的标签

对同一级别的兄弟标签都会起作用,下面例子中段落123都会有样式,即使3不挨着2

四、样式添加类型

1.行内样式

标签和样式耦合在一起

2.内部样式

将样式抽取出来,但只能针对当面页面控制

在head中添加style,在style中的注释是/* */

3.外部样式

新建一个css文件,将样式写在里面

在html文件中引入css文件

五、选择器的优先级

1.非关系选择器优先级

2.关系选择器优先级

赋分比大小,分数一致遵循就近原则

显示蓝色

六、常见属性

w3school 在线教程 点击参考书有属性汇总

1.背景颜色

2.字体属性

(1)字体族属性

当不支持第一种字体时,依次用后面的

(2)字体大小属性

默认大小是16px

(3)字体风格属性

设置斜体 

(4)字体粗细属性

有的字体不支持所有的选项

(5)字体复合属性

通过font可以同时设置多个属性,不过必须按照一定的顺序来

3.文本属性

(1)文本颜色属性

(2)文本间距属性

英文字母以及汉字之间的间距:

英文单词之间的间距:

(3)文本划线属性

分别为下划线和中划线

(4)文本缩进属性

缩进两个字符,设置的值和字符的大小相关

(5)文本对齐选项

默认靠左对齐

(6)文本行高属性

设置行之间的距离

4.列表属性

5.边框属性

顺序没有要求

七、盒子模型

选择中间的容器,对内外上下左右有8个属性

八、元素分类

1.块级元素

2.行内元素

3.行内块级元素

4.元素类型转换

九、浮动

将二维的文档流变为三维,脱离文档流,让元素漂浮,将原来文档流的内容推开,从而实现图片可以和文字在一行

十、定位

1.静态定位

是文档流的默认位置

2.相对定位

3.绝对定位

4.固定定位

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/811297?site
推荐阅读
相关标签
  

闽ICP备14008679号