CSS基础

最新推荐文章于 2022-07-08 18:11:49 发布

流星雨^-^

最新推荐文章于 2022-07-08 18:11:49 发布

阅读量442

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/qiutiandepaomo/article/details/116137050

版权

一、css样式表

1、行内样式表。

<标签名 style="属性1:属性1值；属性2:属性2值；">内容</标签名>

2、内部样式表(内嵌样式表)

<head>

<style>

选择器{

属性1:属性值1；

属性2:属性值2；

}

</head>

这里的选择器就是选择要设置样式的html标签。

3、外部样式表(外链式)

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过Link标签将外部样式表文件链接到HTML文档中。基本语法格式为：

<head>

</head>

rel：定义当前文档与被链接文档之间的关系，这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。

type：定义所链接文档的类型，在这里需要指定为"text/css"，表示链接的外部文件为CSS样式表，一般可以省略。

href：定义所链接外部样式文件的路径，可以是相对路径，也可以是绝对路径。

二、CSS基础选择器

1、标签选择器：可以把某一类标签全部选择出来。

div{

color:red

}

2、类选择器：使用"."进行标识，后面紧跟类名。

.red{

color:red

}

3、 id选择器：使用"#"进行标识，后面紧跟id名。

#green{

color:green

}

id选择器和类选择器的区别：元素的id值是唯一的，只能应用于文档中某一个具体的元素。在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。类选择器相当于人的名字，是可以多次重复使用的；id选择器好比人的身份证号码，不得重复，只能使用一次。

4、通配符选择器：用"*"号表示，*就是选择所有的标签，他是所有选择器中作用范围最广的，能匹配页面中所有的元素，会降低页面的响应速度，不建议随便使用。

red:color

}

<p>隐形的翅膀</p>

这样写完以后页面中所有的标签文字都会变成红色。

三、复合选择器

1、后代选择器(也叫包含选择器)。后代选择器选择的是子孙后代。

父级子级{属性:属性值;属性:属性值;} (注意：父级和子级中间有空格)

<head>
    <style>
        div strong {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <strong>儿子</strong>
        <strong>儿子</strong>
        <strong>儿子</strong>
    </div>
    <div>
        <p>
            <strong>孙子</strong>
            <strong>孙子</strong>
            <strong>孙子</strong>
        </p>
    </div>
</body>

显示结果：

2、子元素选择器。符号 > ，只选亲儿子

<head>
    <style>
        div>strong {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <strong>儿子</strong>
        <strong>儿子</strong>
        <strong>儿子</strong>
    </div>
    <div>
        <p>
            <strong>孙子</strong>
            <strong>孙子</strong>
            <strong>孙子</strong>
        </p>
    </div>
</body>

显示结果：

3、交集选择器

h3.class {color:red; font-size:20px}

第一个是标签选择器，第二个是class选择器，两个选择器中间不能有空格。

<head>
    <style>
        p.red {
            color: red;
        }
    </style>
</head>

<body>
    <p class="red">红色</p>
    <p class="red">红色</p>
    <p class="red">红色</p>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <p>蓝色</p>
    <p>蓝色</p>
    <p>蓝色</p>
</body>

显示结果：

4、并集选择器。是各个选择器通过"，"连接而成的，可以是任何形式的选择器(包括标签选择器、class选择器、id选择器等)。

.class,h3{color:red; font-size:25px;}

<head>
    <style>
        p,
        span {
            color: red;
        }
    </style>
</head>

<body>
    <p>我和你</p>
    <p>我和你</p>
    <span>我和你</span>
    <span>我和你</span>
    <div>我和你</div>
    <div>我和你</div>
    <h1>我和你</h1>
    <h1>我和你</h1>
</body>

显示效果：

5、链接伪类选择器

a:link：未访问的链接。

a:visited：已访问的链接。

a:hover：鼠标移动到链接上。

a:active：选定的链接（按下鼠标没有松开的时候）。

设置的时候尽量按照lvha的顺序设置。

四、CSS的三大特性

1、层叠性：多种css样式的叠加。采用的原则是就近原则。

2、继承性：子标签会继承父标签的某些样式(text-、font-、line-这些元素开头的可以继承，以及color属性)。

3、优先级：定义css样式时，选择器相同，则执行层叠性；选择器不同，就会出现优先级的问题。

权重计算公式

选择器	计算权重公式
继承(从父元素继承过来的属性)	0，0，0，0
标签选择器	0，0，0，1
类选择器	0，0，1，0
id选择器	0，1，0，0

4、权重叠加

我们经常用交集选择器、后代选择器等，是由多个基础选择器组合而成，这个时候就有一个权重叠加的过程。

如：div ul li：0001+0001+0001=0003，.class ul li：0010+0001+0001=0012

5、权重为0

<head>
    <style>
        p {
            color: green;
        }

        .demo {
            color: blue;
        }
    </style>
</head>

<body>
    <div class="demo">
        <p>继承的权重为0</p>
    </div>
</body>

上边代码中文字的显示颜色是绿色，因为p有自己的样式，.demo只是设置的它父标签的样式，当有自己样式的时候，还是会以自己的样式为准，此时类选择器虽然权重比较高，还是当0处理。除非设置一个 .demo p{ color:pink;}，这样才能更改文字颜色。

流星雨^-^

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

一、css样式表1、行内样式表。<标签名 style="属性1:属性1值；属性2:属性2值；">内容</标签名>2、内部样式表(内嵌样式表)<head><style> 选择器{ 属性1:属性值1；属性2:属性值2； }</head>这里的选择器就是选择要设置样式的html标签。3、外部样式表(外链式)将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中...
复制链接

扫一扫