CSS3学习——初步应用

最新推荐文章于 2022-08-08 16:03:52 发布

mmn1

最新推荐文章于 2022-08-08 16:03:52 发布

阅读量247

点赞数 1

分类专栏： CSS3

本文链接：https://blog.csdn.net/hellobupt/article/details/80719145

版权

5 篇文章 0 订阅

订阅专栏

CSS是由选择器（selector)与样式规则（rule）组成（和jquery相似）。而选择器是指CSS样式要应用的目标。当不同的选择器写在一起的时候，中间用逗号(,)隔开即可；当有多个样式规则时，中间用分号(;)隔开。下面进行演示：

首先在对应的CSS文件中对要修饰的对象进行定义

.text_style1 {
color:red;        /*设置文字颜色（此处为注释）*/
background:white;
font-style:italic;
font-weight:bold;}

然后在HTML文件中引用该CSS文件，并标记上对应元素

<head>
    <link rel=stylesheet type="text/css" href="文件路径/对应文件名">
</head>
....
<p class="text_style1">应用CSS</p>

以下对CSS样式表的选择器进行总结：

1、标记名称：直接利用HTML里面的标记名称作为选择器，HTML文件中所有相同的标记都应用相同的样式。

p {
font-size: 14px;}

2、全局选择器：使用‘*’符号

* {
color: #fff000;}

3、 Class选择器：在HTML中应用时，添加class="对应CSS"即可。如果仅希望在某一种标记上应用Class选择器的样式，则在Class选择器之前加上标记名称eg. 标记名称.class属性名{样式规则}。则该样式只会在对应标记上显示。

.class属性名 {
对应的样式表规则}

<font class="class名称">要修饰的内容</font>

4、ID选择器：在HTML中应用时，需要在对应标记中添加ID属性。id的值应该具有唯一性，可以利用js来动态控制对应HTML组件。

#font_style{
font-size: 16px;
font-weight: bold;}

<font id="font_style">要修饰的内容</font>

5、属性选择器：这个选择器属于高级选择器，用来筛选标记中的属性。

a[target] {
background-color: yellow;}

举例如下所示，下面组件都包含了class属性

<div class="first_cond">div标记</div>
<font class="secondtest">font标记</font>
<a class="test">a标记</a>
<p class="test word">p标记</p>

当使用“~=”属性选择器进行筛选时，只会用到<a>、<p>标记

[class~="test"]{
brackground: red}

6、反向选择

:not(p) {
color: red}

整个网页的字体都会应用为红色，只有<p>标记不应用。

关注

专栏目录