day04

最新推荐文章于 2024-09-15 21:53:51 发布

ZOYA.

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量32

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/2302_76796731/article/details/129843614

版权

文章详细介绍了CSS中的选择器权重计算规则，包括ID、类、标签选择器等的权重，以及`!important`的优先级。此外，还讨论了样式的层叠性和伪类选择器的应用，如`a`标签的四种状态。内容还涵盖了CSS的颜色表示方法和一些基本的文字属性，如大小、颜色、字体及对齐方式。

摘要由CSDN通过智能技术生成

一、选择器权重（四位表示）

二、css样式层叠性

三、伪类选择器（除了hover之外，只能用于a标签）

c.rgb(0,0,0) 取值范围0-255之间

d.rgba(0,0,0,.5) 最后一位表示透明度

一、选择器权重（四位表示）

!important 可将元素定义的样式优先级直接提到最高，超过任何选择器。

语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}。

目前ie6以下的浏览器无法识别，火狐与谷歌等可识别

1.标签选择器的权重    0001

2.类名选择器的权重    0010

3.id选择器的权重      0100

4.群组选择器的权重   看选择器具体应用哪一个

5.后代选择器         选择器权重之和（要起作用的标签）

6.属性选择器 0001 详见day12记录

7.伪元素选择器 0001（通常用来清除浮动或者添加小图标，有双冒号::after/::before/::first-letter/::first-line）

8.内联1000

9.伪类选择器 0010    除下文所记外，还可详见day12记录

二、css样式层叠性

不同选择器定义同一个元素时，不同的样式都可以显示，相同的样式按照权重大小显示

三、伪类选择器（除了hover之外，只能用于a标签）

a:link-----------鼠标未访问之前的状态

a:visited--------鼠标访问之后的状态

a:hover----------鼠标悬停是状态(所有标签都可以使用)

a:active--------鼠标按下时的状态（鼠标激活时的状态）

注意：顺序不能颠倒

a:link{ color: palegreen; }

a:visited{ color: peru; }

a:hover{ color: yellow; }

a:active{ color: rgb(12, 216, 243); }

四、css属性

1.宽度

width:200px;

2.高度

height:200px;

3.背景色

background-color:red;

3.1颜色的种类

a.英文单词

b.十六进制( 0-9 a-f) 6位

#9e18b2

#000000----#000

#ff0000----#f00

c.rgb(0,0,0) 取值范围0-255之间

d.rgba(0,0,0,.5) 最后一位表示透明度

透明度取值范围0-1 0透明 1不透明

5.文字颜色

color:red;

6.文字大小

font-size:16px;

文字默认大小16px

浏览器最小显示文字大小：12px---------谷歌浏览器

其他浏览器最小可能是10px

7.字体样式（默认微软雅黑）

font-family: "微软雅黑";

7.1单个字体样式

字体如果是中文或者一个英文单词可以不用双引号包裹起来

字体样式是多个英文的情况下，必须用双引号包裹起来

7.2多个字体样式

多个字体样式用逗号隔开，

如果第一个字体样式有就直接显示，

第一个没有的情况下，在看第二个有没有

8.文字粗细

font-weight:100-900|blod|bloder|lighter;

100,200,300 | lighter==============细体

400,500 normal=================正常

600,700,800,900,blod,bolder=========加粗

9.文字倾斜

font-style:italic|oblique|normal;

italic倾斜的文字

oblique倾斜体

normal:正常

10.文字的水平对齐方式

text-align:left|center|right|justify;

left=======左对齐（默认）

right======右对齐

center=====居中

justify====两端对齐（部分浏览器支持，对中文不起作用）

11.文字垂直对齐方式

line-height:value;

line-height==height--------文字垂直居中

line-height>height--------文字偏下

line-height<height--------文字偏上

12.文本修饰线

text-decoration: none|underline|overline|line-through;

13.首行缩进

text-indent:32px|2em|-10px;

首行缩进 32px，文字默认是16px   16*2=32

-10px 可以为负数

2em  2倍

14.font复合属性：

font:weight style size/line-height family;

简写：粗细倾斜大小/行高字体

注意：顺序不能改变 ,必须同时指定font-size和font-family属性时才起作用。

简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。