当前位置：首页 > article >正文

web2

article 2025/7/3 20:55:55

什么是css

CSS 指层叠样式表 (Cascading Style Sheets)
是为了解决内容与表现分离的问题

css样式表的引入方式

1、浏览器的缺省样式
2、外部样式表

  <link rel='stylesheet' href='css/demo1.css'>

3、内部样式表

使用 <style>标签书写样式

4、行内样式

在标签内，使用style属性书写样式

优先级：缺省样式 < 样式表（包含内部或外部） < 行内样式。
实际在项目中，优先采用外部样式表，其次是内部样式表，除非特殊情况,否则不建议使用行内样式。
外部样式表：引用灵活（一处变化，多处响应）
内部样式表：内容和样式分离。

css样式表中的选择器：

1、基本选择器

1、id选择器
2、类选择器  可以一对多也可以多对一甚至可以多对多
3、元素选择器
4、属性选择器

2、伪选择器

  1、伪元素:first-letter   首字母:first-line     首行:before:after用于在元素的内容之前或之后插入修饰。2、伪类:first-child    当元素是同胞元素中的首个时p:first-child 选择p元素，要求p元素是同胞元素中的首个时:hover      当鼠标处于元素之上时:active     当元素处于激活状态时（鼠标按下时...）：link      当元素默认时候的链接：visited： 被访问过的状态

3、特殊选择器

::selection选择器匹配元素中被用户选中或处于高亮状态的部分。::selection只可以应用于少数的CSS属性：color, background, cursor,和outline。

3、选择器的组合使用规则

    1、组合选择选择器1,选择器2.....,选择器n{}2、后代选择器ul li{}   选择li元素，但要求li的祖先元素中有ul存在。3、子元素选择器ul > li{}   选择li元素，但要求li的父元素是ul元素。4、同胞紧邻选择器li+li{}      选择li元素，但要求同胞元素中，排在li之前的还是li元素。

4、选择器的优先级

忽略组合规则（除了组合选择逗号）
将选择器按基本选择器和伪选择器分离打散。
将它们分别扔到三个容器内：坑1：id选择器
坑2：类选择器、伪类选择器
坑3：元素选择器、伪元素选择器分别计算数量：
例子1：
#a1 .class1 > ul > li + li{}
id选择器前带#，类选择器前带.剩下的是元素选择器
1,1,3
例子2：
id选择器前带#，类选择器前带.剩下的是元素选择器
.class1 #a2  ul  #a3 li{}
2,1,2按顺序(先是id选择器、类选择器、元素选择器)比较三部分的数量，直到比较出不同的为止，数量多的优先级高。
如果都相同，那么，谁后出场，谁优先级更高

注意:

color: green !important;  强制让当前优先级最高。

所有的css优先级顺序：

1、!important
2、行内样式
3、样式表----》需要再计算选择器优先级
4、缺省样式

css文本样式

css颜色的设置

颜色的描述值
6进制值
rgb表示法
hsl表示法

所有浏览器的默认字体大小是16px ！！！。
长度单位：
px
%
em 1em是当前容器内字体大小。
rem 1rem是html容器的字体大小。
cm、mm 厘米毫米，同时为了屏幕显示，为了打印

		    首行缩进text-indent: 2em;行高line-height: 2em;水平对齐left、right、center、justify（两端对齐）text-align: center;字体粗细：100 ~ 900font-weight: bold;字体大小：建议使用偶数。font-size: 100px;字体类型font-family: '微軟正黑體','宋体' ;字体风格：是否是斜体font-style: italic;font-style: normal;文本注释：下划线，中划线text-decoration: underline line-through overline ;波浪线text-decoration: underline wavy red;