CSS学习0324

最新推荐文章于 2024-08-19 19:27:18 发布

EM688

最新推荐文章于 2024-08-19 19:27:18 发布

阅读量765

点赞数 9

文章标签： css 学习前端

本文链接：https://blog.csdn.net/EM688/article/details/136972491

版权

CSS为层叠样式表，级联样式表，简称样式表。

用于HTML文档中元素样式的定义，将网页美化。

CSS语法规则：选择器，一条或多条声明{属性:值}

<style>
        p{
            color: brown;<!--字体颜色-->
            font-size: 40px;<!--字体大小-->
        }
    </style>

先在html文件中写CSS的代码，在<head>标签中写一对<style></style>标签，按照上面的格式对所需标签进行属性的修改。需注意的是，目前调试发现，在<head>中使用<style>对段落标签<p>进行属性修改时，会对所有的段落文本进行一致修改。修改的属性可以为一条或者多条。

内联样式

当需要对单条标签进行样式修改时，可以使用内联样式在相关标签内进行修改

<p>段落1,这是第一个段落。</p>
<p style="background-color:darkgreen;font-size: xx-small;">段落2,这是另一个段落。</p>

运行可以发现，即使在<head>标签内先对<p>标签进行属性修改，但在第二个段落标签内继续修改，两个段落的格式就不同了。

内部样式

当需要对文档中所有同类标签使用统一格式（例如字体大小，颜色等等），为了代码简洁性，降低维护成本，就可以在<head>标签中使用<style>进行统一定义。

<style>
        h3{
            color: aquamarine;<!--颜色-->
            font-size: 20px;<!--字体大小-->
        }
        p{
            color: brown;
            font-size: 40px;
        }
    </style>

单页面生效，多页面不适合。

外部样式

当需要对一个多页面大型网站进行样式规定时，可以在文件夹中另外创建一个后缀为.css的文件，将所有的样式规定都写在其中，然后在需要使用的页面使用<link>标签进行关联。只用改变这个文件中的样式，就能改变所有使用该样式的网页。

<link rel="stylesheet" href="./public.css">

注意：写在<head>标签中，访问地址使用前面学的相对路径同级寻找。

选择器

全局选择器

与任意元素匹配，即可以作为样式的基础，做样式初始化，描述所有元素的共性。

语法

*{
    margin: 0;
    padding: 0;
}

标签选择器

对一类标签进行选择，描述一类标签的共性，无法描述单个标签的个性。

语法

p{
    color: chocolate;
    font-size: medium;
    background-color: darkseagreen;
}

当全局选择器与标签选择器对同一属性进行规定时，全局选择器优先级最低。

所有学习过的标签都可以用作选择器。

可以用来处理一段文字中部分特殊样式的短语或单字，嵌套标签使用，标签选择器修改属性。

类选择器

当需要有针对性的对某些标签进行属性修改时，使用类选择器能很灵活的实现。

语法

.type1{
    color: blueviolet;
    font-size: 68px;
}

<h1 align="center" class="type1">一级标题</h1>
<h2 align="center" class="type1 type2">二级标题</h2>

类名由字母数字下划线组成，但不能由数字开头。

在.css文件中写好样式，然后在.html文件中选择标签使用该类选择器，就可以修改对应属性。

一个类选择器可以被多个标签使用，一个标签也可以使用多个类选择器，使用空号隔开即可。

ID选择器

针对某一特定标签使用，且只能使用一次。

语法

#texttype1{
    font-size: 20px;
    color: chartreuse;
}

<span id="texttype1">这是一段文字</span>

既可以写在.css文件中，也可以写在<head>标签中的<style>标签中。

每个ID只可以使用一次，要想对两个标签使用，第二个标签的ID名需要改变。

ID不能以数字作为ID名开头。

EM688

关注

9
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
CSS学习0324

CSS为层叠样式表，级联样式表，简称样式表。用于HTML文档中元素样式的定义，将网页美化。先在html文件中写CSS的代码，在<head>标签中写一对<style></style>标签，按照上面的格式对所需标签进行属性的修改。需注意的是，目前调试发现，在<head>中使用<style>对段落标签<p>进行属性修改时，。修改的属性可以为一条或者多条。
复制链接

扫一扫