2020-10-18学习笔记（样式规则——权重判断层叠）

2020-10-18  本文已影响0人  amanohina

样式规则

用内嵌式作为例子：

1.所有CSS代码必须写在<head>标签内部的一对<style>标签内。（外联式和导入式则不需要，创建.css文件直接书写，内联式则是使用style属性进行样式修改）
2.CSS在给某个标签进行设置之前，先用选择器选中标签
3.CSS样式的属性，属性名和属性值的键值对写法是k:v
4.每个选择器添加的样式属性都必须要在一对大括号之内{}
5.给一个标签添加所有需要的样式，需要用;分隔开来，然后在{}内一一罗列

注意：

eg：

  div{
            width: 200px;
            height: 200px;
            background-color: cyan;
            margin-top: auto;
            margin-bottom: 10px;
        }

和下面的代码是等效的

div{width:200px;height:200px;background-color:cyan;margin-top:auto;margin-bottom:10px;}

CSS注释语法

CSS样式格式

紧凑模式

英文大小写

空格规范

1.选择器与大括号之间留有一个空格，
2.冒号后面，属性值前面留有一个空格。


规范

CSS常用样式

文本属性：颜色color

部分常用的颜色名 
/*段落颜色为红*/
        p {
            color: red;
        }

更多的颜色可以查阅W3C手册得到

颜色值

1.rgb模式
2.十六进制模式

rgb模式
        p {
            color:rgb(255,255,255)
        }

色号可以查阅资料或者PS拾色器可以获取


PS的拾色器
十六进制模式

文本属性：字体font-family

        p {
            color:rgb(255,255,255);
            font-family: "宋体","Arial";
        }

常用字体

如果不设置字体属性，不同的浏览器有自己默认的字体

注意事项：

1.虽然可以设置多个字体名称，但是只加载一种，顺序是按照书写顺序来的，写多个的目的是如果浏览器不支持一个字体，就会尝试下一个，直到找到适合的字体
2.浏览器中加载的字体是用户机器中自带的，如果用户没有代码中设置的字体就会加载失败，所以最后应该在最后设置一个所有机器都有的字体作为后路
3.中文字体一般带有英文可以加载的字体效果，避免影响可以将英文字体写在属性值的最前面

电脑内查看字体的路径

首选字体根据设计图敲定，最后需要设置备用字体

文本属性：font-size

注意事项

1.如果 HTML 中不设置字号，不同的浏览器有自己默认的加载字号，比如 chrome、 IE，默认显示字号为 16px。

  1. 不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载，0除外。chrome 浏览器最小加载显示字号为8px，IE 浏览器最小可以支持1px的字号。

实际使用

    <p style="font-size: 14px;">看看我是多少字号的段落?</p>

盒子实体化三属性

要在浏览器里具体看到一个盒子占有的实际位置，需要设置盒子可以实体化的三属性

实体化属性：

实体化属性 
    <div style="width: 200px; height: 200px; background-color: silver;">1</div>

CSS选择器

在内嵌式和外部CSS中，要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素，这时就需要用到CSS的选择器

标签选择器

<body>
    <h2>这是二级标题</h2>
    <p>段落内容</p>
    <p>段落内容</p>
    <h2>这是二级标题</h2>
    <p>段落内容</p>
    <p>段落内容</p>
    <h2>这是二级标题</h2>
    <p>段落内容</p>
    <p>段落内容</p>
    <div>
        <div>
            <div>
                <div>
                    <p>这是一个嵌套的p标签内容</p>
                </div>
            </div>
        </div>
    </div>
</body>

 <style>
        p {
            color: red;
        }
        h2 {
            color: silver;
        }
    </style>

安插了p和h2标签的选择器，效果如下：


效果

标签选择器特点：

id选择器

<p id="inside">这是一个嵌套的p标签内容</p>

 #inside {
            color: skyblue;
        }

缺点：只能实现单选，不能完成多选的功能

类选择器

类选择器特点

1.只要class属性值相同，就可以被同一个类选择器选中
2.一个标签的class属性可以用多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这个标签，每个选择器后面的样式都会添加给同一个标签

.fs20{
            font-size: 20px;
        }
        .col{
            color: green;
        }

 <p class="fs20 col">段落内容</p>
    <p class="fs20">段落内容</p>
效果图

class属性值空格间隔一位再添加其他的属性值就可以把样式添加到同一个标签。

类选择器的特殊应用

<style>
        .fs20 {
            font-size: 20px;
        }
        .fs30 {
            font-size: 30px;
        }
        .green {
            color: green;
        }
        .red {
            color: red;
        }
    </style>

 <p class="fs20 green">段落内容</p>
    <p class="fs30 red">段落内容</p>
效果图

类选择器的优点

1.通过一个类选择器进行多选，选中多个标签，添加公共样式
2.一个标签可以被多个类选择器选中，将所有样式进行分离，提取公共样式和单独样式，节省代码量

**实际工作中，有一个规律：样式用类选择器，行为（JavaScript）用id选择器

通配符选择器

通配符的特点和应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       * {
           color: red;
       }
    </style>
</head>
<body>
    <h2>这是二级标题</h2>
    <p>段落内容</p>
    <p>段落内容</p>
    <h2>这是二级标题</h2>
    <p>段落内容</p>
    <p>段落内容</p>
    <h2>这是二级标题</h2>
    <p>段落内容</p>
    <p>段落内容</p>
    <div>
        <div>
            <div>
                <div>
                    <p>这是一个嵌套的p标签内容</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
效果

后代选择器

<body>
    <div class="box">
        <ul>
            <li><p>我是嵌套下的内容1</p></li>
            <li><p>我是嵌套下的内容2</p></li>
        </ul>
        <p>我是外部段落</p>
    </div>
</body>

<style>
       .box ul li p {
            color: red;
       }
    </style>
效果图

后代选择器特点

交集选择器

<div class="box1">
        <ul>
            <li>
                <p class="demo">这是 box1 标签中 li 标签内部的段落</p>
            </li>
            <li>
                <p class="demo ps">这是 box1 标签中 li 标签内部的段落</p>

            </li>
            <li>
                <p>这是 box1 标签中 li 标签内部的段落</p>

            </li>
            <li>
                <p>这是 box1 标签中 li 标签内部的段落</p>
            </li>
        </ul>
        <p>这是box1标签内部的段落</p>
    </div>

box1里的满足class为demo ps的标签p，缺一不可

<style>
       .box1 p.demo.ps {
           color: green;
       }
    </style>
效果

交集选择器的更多写法：

并集选择器

<style>
    body,h2,div,ul,li,p {
      margin: 0;
      padding: 0;
      color: red;
    }
  </style>

代码如上

并集选择器用途

1.多个标签具有公共样式，但是不能用一个选择其选中，可以使用并集写法
2.可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能

CSS层叠式

继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            color: green;
            font-family: "宋体";
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h2>这是一个二级标题</h2>
    <div class="box1">
        <p>这是 box1 标签内的段落</p>
        <p>这是 box1 标签内的段落</p>
        <p>这是 box1 标签内的段落</p>
        <p>这是 box1 标签内的段落</p>
    </div>
</body>
</html>

继承了文本相关的，color，size，family等等，但是没有继承宽高等等。

效果
控制台情况
element.style是行业样式
user agent.stylesheet是用户看到的默认的样式
具体的解析

继承性应用

body {
    font-size:14px;
    font-family:"宋体";
    color:red;
}

层叠性

怎么判断？

判断概图

选中目标标签

选中目标标签的祖先级

!important关键字

行内式

上一篇 下一篇

猜你喜欢

热点阅读