初始CSS

最新推荐文章于 2022-07-14 16:41:26 发布

simon_dg

最新推荐文章于 2022-07-14 16:41:26 发布

阅读量411

点赞数

分类专栏：前端基础文章标签： html css

本文链接：https://blog.csdn.net/simon_dg/article/details/77758661

版权

前端基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

，前几篇介绍的HTML只是比较常用的一部分。其他的还需自行了解。
sublime里面的emmet语法快捷键，百度云地址：http://pan.baidu.com/s/1eR1Frk2 密码：fdnp
emmet语法加快了代码的书写。比如在sublime里面输入： .box1>a[#]{$}*4 会得到

 <div class="box1">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>

一、CSS的整体感知
css是cascading style sheet 层叠式样式表的简写。它为标签提供样式，呈现在网页上。
例如下面定义一个div，没有设置宽高，在网页中什么也不显示。所有需要CSS设置标签样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="nav"></div>
</body>
</html>

CSS样式引入有三种：嵌入样式表、链接外部样式表、内嵌样式（优先级最高）。
嵌入样式表：用<style></style>标签对。
链接外部样式表：用link标签引入外部样式文件。文件以 .css结尾。
内嵌样式：<li style="font-size: large;color: red" >Bigbang</li>
引入位置：<head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=""> href为文件路径。 <style></style> </head>
二、选择器
想要设置一个标签属性，肯定要选择中它。
1.标签选择器
标签选择器是选择页面中所有的同类标签。
比如下面是设置了页面中所有div的宽度和高度，背景颜色。

<style>
div {
        width: 100px;  emmet语法：w100px再tab
        height: 100px;
         background-color: #000;
        }
</style>

2.id选择器
id就像人的身份证一样，是唯一的。

#banner {
        width: 100px;
        height: 100px;
        background-color: #000;
    }  只选中id为banner的div
<body>
    <div  id="banner"></div>
</body>

3.类选择器
一个标签可以有多个class，中间用空格隔开。一个class也可以被多个标签拥有。

.banner {
        width: 100px;
        height: 100px;
        background-color: #000;
    }  只选中class（类名）为banner的div
<body>
    <div  class="banner tab"></div>
</body>

4.后代选择器

<body>
    <div class="div1">
        <p>我是p1</p>
        <div>
            <p>我是p2</p>
        </div>
    </div>
</body>

直接后代选择器：.div1>p 选择的是.div1的直接后代<p>我是p1</p>，直接后代为div的儿子而不是孙子辈。

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

直接后代选择器

后代选择器：.div1 p 选择的是.div1的所有后代p

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

后代选择器

5.交集选择器
交集选择器，我们一般都是以标签名开头。
eg： div.special {} 该标签要同时满足是div而且类名是special的才可以选中。div.special中间没有空格

6.并集选择器
eg： div， p {} 选中所有div和p,并集选择器通常用在设置两个标签相同样式时。

7.通配符
*{
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
}
8.相邻兄弟选择器
选择离自己最近的兄弟

9.属性选择器
为具有某个属性的HTML元素定义样式。（CSS3介绍）
上面是CSS中的基本选择器，CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。以后会一一介绍。

三、CSS的继承性和层叠性
继承性：
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
color、 text-开头的、line-开头的、font-开头的。这些都是可以继承的。
这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。

层叠性：
层叠性：就是css处理冲突的能力。这个很重要。
当对同一个标签设置样式时，会因为标签选择器权重的问题，一些选择器会被层叠掉。

权重计算：id的数量，类的数量，标签的数量
先比较id,有id的优先，再看数量，数量一样；再比较class，依次类推。

特别：在计算权重之前，要看看是不是选中了要设置的那个标签，如果没有，则权重为0。

当所有都没有选中，那么有一个就近原则：谁描述的近，听谁的。

并集选择器要分开计算：

权重问题的深入：
同一个标签，携带了多个类名，有冲突：

!important标记
给一个属性提高权重。这个属性的权重就是无穷大。

!important需要强调3点：

1） !important提升的是一个属性，而不是一个选择器

2） !important无法提升继承的权重，该是0还是0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        color: red!important;
    }
    p {
        color: green;
    }
    </style>
</head>
<body>
    <div>
        <p class="p1" id="p2">我是什么颜色？</p>
    </div>
</body>
</html>

3）!important不影响就近原则
如果大家都是继承来的（没有选中，权重为0），按理说应该按照“就近原则”。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        color: red!important;
    }
    ul {
        color: green;
    }
    </style>
</head>
<body>
    <div>
        <ul>
            <p class="p1" id="p2">我是什么颜色？</p>
        </ul>
    </div>
</body>
</html>

simon_dg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初始CSS

前几篇介绍的HTML只是比较常用的一部分。其他的还需自行了解。 sublime里面的emmet语法快捷键，百度云地址：http://pan.baidu.com/s/1eR1Frk2 密码：fdnp emmet语法加快了代码的书写。比如在sublime里面输入： .box1>a[#]{$}*4 会得到 <div class="box1"> <a href="#">1</a>
复制链接

扫一扫

专栏目录