1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html内嵌式选择器 CSS样式 CSS选择器(Cascading Style Sheet)

html内嵌式选择器 CSS样式 CSS选择器(Cascading Style Sheet)

时间:2023-12-30 23:55:58

相关推荐

html内嵌式选择器 CSS样式 CSS选择器(Cascading Style Sheet)

颜色设置

#rrggbb 例如:#ff00ff

#rgb 例如:#f0f,等价于#ff00ff

rgb(x,x,x) 例如:rgb(112,112,112) 数值为0-255的整数值

rgb(x%,x%,x%) 例如:rgb(20%,50%,44%) 数值为0-100的整数值

指定URL方式

body {background-image:url(qq.png)};

body {background-image:url(/qq.png)};

body {background-image:url('qq.png')};

body {background-image:url("qq.png")};

CSS嵌入HTML方式

1、内联(行内)

例如:

内嵌

2、内嵌(内部式)

CSS样式写在

中间

例如:

p {color:red; font-size:20px;}

内嵌

```

###3、外部(外联)

>CSS样式写在单独的.css文件中,在HTML中引入.css文件

例如:

- .css文件中写如下内容

`` p {color:red; font-size:20px;}``

- .html文件中

中引入

````

---

>HTML中CSS的样式优先级:就近原则

---

#CSS选择器(选择符)

###1、HTML选择符

>将HTML标签名作为选择符名

例如:

body {background-color:#ddd}

h1 {color:red}```

2、类选择符(class选择符)

用 . 开头写的样式,通过 class 属性使用,同一标签可以有多个class选择器。

例如:

//设置

h2.css1 {color:red}//有名类选择符

.css2 {color:blue}//匿名类选择符

//使用

h2标签中的css1样式

h3标签中的css2样式

```

###3、ID选择符

>用 # 开头写的样式,使用 id 属性使用每个标签最多只能有一个ID选择器。

例如:

//设置

id1 {color:yellow; background-image:url(ss.jpg)}

//使用

h3标签使用了id1的ID选择器

###4、关联选择符

>大样式中的子样式设置,用空格分开。

//设置

ul a {color:red} //ul 中的 a 标签使用这个样式

.css1 a {color:blue} //css1类选择器中的a标签使用这个样式

###5、组合选择符

>用 ,分开,表示声明的标签都是用此样式

//设置

h1,h2,h3 {color:red}

###6、伪元素选择符

>一个标签在不同状态下的设置

//设置

a:link {color:#ff0000; text-decoration:none}//未访问的链接

a:visited {color:#00ff00; text-decoration:none}//已访问

a:hover {color:#ff00ff; text-decoration:underline}//鼠标停留在链接上

a:active {color:#0000ff; text-decoration:underline}//点击链接

* 注:

-a:hover 必须放在a:link a:visited 之后才有效果

-a:active 必须放在a:hover 之后才有效果

#优先级

ID选择器>class类选择器>html选择器>html属性

使用 !important 可以提高优先级

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。