day1

通过在每个HTML文档中放置一个<link>元素，可以将外部CSS样式表应用于任意数量的HTML文档。<link>标记的属性rel必须设置为“样式表”，而href属性必须设置为指向样式表的相对路径或绝对路径。虽然使用相对URL路径通常被认为是良好的做法，但也可以使用绝对路径。在HTML5中，可以省略类型属性。建议将<link>标记放<head>里面

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{font-size: 20px;
            color:red;}
        h1{color: blueviolet; 
           font-family: "Arial Narrow";
        }
    </style>
</head>
<body>
    <h1 style="color: green; text-decoration: underline;">hello world</h1>//实践证明此处对颜色的控制强于在head里面<style>对颜色的设置
    <p style="font-size: 25px;font-family: 'Trebuchet MS';">啧啧啧</p>
    <script>
        console.log("hello,world!");
        console.log("啊呀");
    </script>
</body>

 

一、Structure and Formatting of a CSS Rule——CSS规则的结构和格式化

 1、Property Lists ——属性列表

可以写在一行，也可以分开写。

2、multiple selectors

对css选择器进行分组是，可以将相同的样式应用到几个不用的元素，二不重复样式表中的样式，用逗号来隔开。

3、一些基础的选择器

 选择具有给定属性和值的元素，其中给定属性在任何位置都包含给定值（作为子字符串）

1、[attribute] 
div[data-color] {
 color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>
2、[attribute="value"] 
div[data-color="red"] {
 color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>
3、[attribute*="value"] 
<head>
    <meta charset="UTF-8">
    <style>
        [class*="foo"] {
            color: red;
        }
        [class*="doo"] {
            color: black;
        }
    </style>
</head>

<body>
    <div class="foo-123">This will be red</div>
    <div class="doo-122">This will be what color</div>
</body>

4、[attribute~="value"]

[class~="color-red"] {
 color: red;
}
<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

5、[attribute^="value"]

[class^="foo-"] {
 color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>
6、[attribute$="value"] 
[class$="file"] {
 color: red;
}
<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>
7、[attribute|="value"]
[lang|="EN"] {
 color: red;
}
<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>
8、[attribute="value" i] 
[lang="EN" i] {
 color: red;
}
<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

二、组合器

代码：

<head>
    <meta charset="UTF-8">
    <style>
        div p {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>it will be red</p>
        <section>
            <p>it will be red</p>
        </section>
    </div>
    <p>it will be not red</p>
</body>

注意，此处在style里面有写到div p，针对的是div里面的p.如果不在div里面就不会被约束，同样，如果在div中不是p段落，也不会被约束，变成红色。

如果style里面写的是div > p，那么只有被div直接包含的第一层会被约束颜色变为红色

如果想让相邻的段落变颜色，只需要后面加上+。例如p + p,但是如果p和p中间有其他的标签，就不会被约束到。

实践证明。当你想让body里面的哪个段落字体变颜色，只需要在style里面具体到他被包括的前面一个<>就可以了。俩个就可以具体到指定的位置，如果有相同的则需要在加一个

实现：

 

2、类名称选择器

代码：

例如想让下面段落的颜色变为蓝色。

<head>
    <meta charset="UTF-8">
    <style>
        .important {
            color: orange;
        }
        .warning {
            color: blue;
        }
        .warning.important {
            color: red;
        }
    </style>
</head>

<body>
    <div class="warning">
        <p>This would be some warning copy.</p>
    </div>
    <div class="important warning">
        <p class="important">This is some really important warning copy.</p>
    </div>
</body>

可以直接在<head>里面的<style>里面写

.warning {
 color: blue;
}
//也可以这样
div[clss = "warning"]
{
　　color:blue
}

 3、Select element using its ID without the high specifificity of the ID selector——使用其ID来选择元素，而没有ID选择器的高特异性

代码：

html

<div id="element">warning</div>

CSS

[id="element"] {color:black}//特异性低，易于覆盖
#element { color:red} //高特异性将覆盖许多选择器

实现：

 4、最后一个类型的选择器

代码：

<head>
    <meta charset="UTF-8">
    <style>
        p:last-of-type
        {
            background:#C5CAE9;
        }
        h1:last-of-type{
            background: #cddc39;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>First paragraph</p>
        <p>Second paragraph</p>
        <p>Last paragraph</p>
        <h1>Heading 1</h1>
        <h2>First heading 2</h2>
        <h2>Last heading 2</h2>
    </div>
</body>

实现：

 4、in-range 选择器

代码：

<head>
    <meta charset="UTF-8">
    <style>
        input:in-range {
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <input type="number" min="10" max="20" value="15">
    <p>The border for this value will be blue</p>
</body>

实现：

5、CSS中的伪类的焦点

代码：

<head>
    <meta charset="UTF-8">
    <style>
        div {
            height: 80px;
        }
        input {
            margin: 30px;
        }
        div:focus-within {
            background-color: #1565C0;
        }
    </style>
</head>

<body>
    <h3>Background is blue if the input is focused .</p>
        <div>
            <input type="text">
        </div>
</body>

实现：

posted @ 2023-01-29 17:57  末叶da  阅读(110)  评论(0)    收藏  举报