css层叠样式表

最新推荐文章于 2022-03-23 15:23:07 发布

不知凡几

最新推荐文章于 2022-03-23 15:23:07 发布

阅读量300

点赞数

分类专栏：理论知识文章标签： css

本文链接：https://blog.csdn.net/myself_own/article/details/107149031

版权

理论知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css的作用

浏览器兼容好
使页面的字体变得更漂亮，更容易排版
页面布局更轻松，简单
网页维护更容易，比如更换风格这些
新的css可以替代一些通过图片转换实现的功能，从而更快的下载页面
孔子字体大小，页面宽度，内容对齐方式，字体样式，某些区域的背景图片，背景颜色，超链接，图片和文字对齐方式，网页中内容板块间隔等样式

css的三大特性

1.层叠性
对同一个元素能进行多次设置样式，将最后一个样式设置为该元素的属性值
样式表：
（1）浏览器缺省设置
（2）外部样式表（link引入的css）
（3）内部样式表（位于head标签中的css）
（4）内联样式表（设置在头标签中的样式）
2.继承性
指子元素没有设置样式时，会继承父元素的样式，可继承的属性有比如字体类属性，文本类属性，背景类属性，但是子元素不会继承父元素的宽高和边距属性
3.优先级
!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
优先级高的规则会忽视层叠性，忽视就近原则来定义样式，同一个元素，最终生效的样式为优先级最高的那种样式

css引入方式

外部样式表

<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" href="test.css">
</head>

内部样式表（内嵌样式表）

<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style type="text/css">
        p{
        font-size:15px
        }
    </style>
</head>

内联样式表

<p style="color: red;font-size: 15px">你好</p>

导入样式表

<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        @import "test.css";
        h1{
            color: red;
        }
    </style>
</head>

css选择器

id选择器
id选择器可以为设有唯一id的HTML元素设置样式
在HTML元素上，使用id标签属性定义id选择器的名称

<div id="mydiv">mydiv</div>

定义选择器

 #mydiv{
          color: red;
        }

class选择器
为设置了class类名的元素设置样式，可以为多个元素设置class类名
为元素设置class类名

<div class="mydiv">1</div>
<div class="mydiv">2</div>
<div class="mydiv">3</div>

定义class选择器

 .mydiv{
            font-size: 25px;
            background-color: #0066a1;
        }

元素选择器
以HTML元素名称来命名的选择器，直接为各种元素标签设置样式

<div>这是元素选择器</div>

定义元素选择器

div{
    font-size: 25px;
    background-color: #0066a1;
}

通配符*选择器
通配符选择器可以设置网页中所有HTML元素
css代码：

*{
  margin: 0;
  padding: 0;
}

后代选择器
后代选择器匹配所有指定元素的所有后代元素（包括指定元素的子元素以及它的子孙元素）
HTML代码：

<div class="mydiv">
    <div class="div1">mydiv里的div1</div>
    <div class="div2">
        <div class="div3">div2里的div3</div>
        <div class="div4">div2里的div4</div>
    </div>
    <p class="p1">mydiv里的p1</p>
    <p class="p2">mydiv里的p2</p>
    <p class="p3">mydiv里的p3</p>
</div>

css代码：
类名为mydiv的元素下所有的div后代元素

.mydiv div{
            color: red;
        }

效果：
在这里插入图片描述

子元素选择器
与后代选择器相比，子元素选择器只能选择指定元素的直接子元素

<div class="mydiv">
    <div class="div1">mydiv里的div1</div>
    <div class="div2">
        <div class="div3">div2里的div3</div>
        <div class="div4">div2里的div4</div>
    </div>
    <p class="p1">mydiv里的p1</p>
    <p class="p2">mydiv里的p2</p>
    <p class="p3">mydiv里的p3</p>
</div>

css代码：

.mydiv>.div1{
            color: red;
        }

效果：
在这里插入图片描述

并集选择器
并集选择器通过“,”来分隔多个选择器，这些选择器可以是id，class，元素和其他复合选择器

HTML代码：

<div class="mydiv">
    <div class="div1">mydiv里的div1</div>
    <div class="div2">
        <div class="div3">div2里的div3</div>
        <div class="div4">div2里的div4</div>
    </div>
    <p class="p1">mydiv里的p1</p>
    <p class="p2">mydiv里的p2</p>
    <p class="p3">mydiv里的p3</p>
</div>

css代码：

.div1,.p2{
            color: red;
        }

效果：
在这里插入图片描述

交集选择器

给指定的HTML定义一个专用的选择器，其他元素即使使用也无效

HTML代码：

<div>
    <h1 class="test">h1标签</h1>
    <p class="test">p标签</p>
    <div class="test">div标签</div>
</div>

css代码：

 p.test{
            color: red;
        }

效果：
在这里插入图片描述

不知凡几

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css层叠样式表

css的作用浏览器兼容好使页面的字体变得更漂亮，更容易排版页面布局更轻松，简单网页维护更容易，比如更换风格这些新的css可以替代一些通过图片转换实现的功能，从而更快的下载页面孔子字体大小，页面宽度，内容对齐方式，字体样式，某些区域的背景图片，背景颜色，超链接，图片和文字对齐方式，网页中内容板块间隔等样式css的三大特性1.层叠性对同一个元素能进行多次设置样式，将最后一个样式设置为该元素的属性值样式表：（1）浏览器缺省设置（2）外部样式表（link引入的css）（3）内部样式表（
复制链接

扫一扫

专栏目录