20181010日学习笔记 - CSS

1:HTML相当一个裸体的人,CSS给人穿上各种衣服,JavaScript动起来

2:CSS(给HTML标签设置样式).

　　1:CSS定义:

　　　　层叠样式表

　　2:CSS语法:

　　　　选择器 {k1:v1;k2:v2...}

　　3:CSS代码存在的位置

　　　　1.直接写在标签中的style属性

　　　　2.写在head标签中的style标签内

　　　　3.写在单独的CSS文件中,通过link标签引用

　　4.CSS选择器(定义如何在HTML中找标签)

　　　　1.基本选择器

　　　　　　1.ID选择器 --> #p1

　　　　　　2.标签选择器 --> div

　　　　　　3.类选择器 -->.c1

　　　　　　4.通用选择器 -->*

　　　　2.组合选择器

　　　　　　1.子子孙孙选择器(后代选择器) --> div p

　　　　　　2.儿子选择器 --> div>p

　　　　　　3.毗邻选择器(紧挨着下面的标签) -->div+p

　　　　　　4.弟弟选择器(同级下面所有的标签)--> div~p

　　　　3.属性选择器

　　　　　　1.有某个属性的标签 -->div[title]

　　　　　　2.有属性并且属性值等于我给定的值 --> div[title='hello']

　　　　4.分组和嵌套

　　　　　　1.分组应用于多个选择器找到标签应用相同的样式 --> div,p {color:green}

　　　　　　2.基本选择器之间可以任意嵌套组合使用 --> .c1>p

　　　　5.伪类选择器,伪元素选择器

　　5.选择器的优先级

　　　　1.当选择器相同的时候,谁最后加载就听谁的

　　　　2.当选择器不同的时候

　　　　　　1.内联样式(1000) > ID选择器(100) > class选择器(10) > 元素选择器(1) --权重计算永不进位

　　　　　　2.不讲道理的!import

基本选择器:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <!--<style>-->
        <!--p {color: green}-->
    <!--</style>-->
    <style>
        #p1 {color:red}
        #p2 {color:green}
        /*所有div标签*/
        div {color:blue}
        /*有a1这个class标签*/
        .a1 {color:orange}
        .a2 {color:darkblue}
        /*有a1这个class的i标签*/
        i.a1 {color:darkred}
        /*通用*/
        * {color:black}
    </style>
    <link rel="stylesheet" href="01.css">
</head>
<body>
<!--<p style="color: red">Hello world!</p>-->
<p class="a1 a2 a3">御天荒神</p>
<p>御天荒神</p>
<p id="p1">御天荒神</p>
<p id="p2">御天荒神</p>
<p>御天荒神</p>
<p>御天荒神</p>
<p>御天荒神</p>

<div>金光御九界</div>
<div>金光御九界</div>


<span class="a1">霹雳布袋戏</span>
<br>
<span class="a1">霹雳布袋戏</span>
<p class="a1">霹雳布袋戏p</p>
<i class="a1">霹雳布袋戏i</i>
</body>
</html>

组合选择器:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*找儿子标签*/
        li>a {color:red}
        /*子子孙孙中找标签*/
        #d1 {color:chartreuse}
        /*毗邻选择器,找往下紧挨着的*/
        div+p {color:crimson}
        /*弟弟选择器:同级往下找*/
        #d2~* {color:fuchsia}
        #d2~p {color:pink}
    </style>
</head>
<body>
<ul>
    <li><a href="">手机</a></li>
    <li><a href="">电脑</a></li>
    <li><a href="">电视</a></li>
</ul>
<ol>
    <li><p><a href="">纤尘往事</a></p></li>
</ol>
<div id="d1">
    <div>
        <div>
            <p>人生一大戳</p>
        </div>
        <p>人生一小戳</p>
    </div>
</div>
<br>
<p>毗邻在上</p>
<div><b>毗邻</b></div>
<p>毗邻在下</p>
<hr>
<div id="d2">无心之剑</div>
<p>剑心剑</p>
<a href="">剑中剑</a>
<br>
<i>楼至韦驮</i>
</body>
</html>

　　属性选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        div[qs] {color:green}
        div[qs='nb2'] {color:orange}
        div[title*='hello'] {color:blueviolet}
        div[title~='hello'] {color:deeppink}
    </style>
</head>
<body>
<div id="b1" class="c1" qs="nb">骑士计划</div>
<div qs="nb2">吃屎计划</div>
<div>学python</div>
<div title="鼠标移上去的提示"></div>
<div title="helloworld">helloworld</div>
<div title="hello world">hello world</div>
</body>

　　分组和嵌套:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>分组和嵌套</title>
    <style>
        /*#d1 {color:red}*/
        /*.c1 {color:red}*/
        /*分组*/
        #d1,.c1 {color:blueviolet}
    </style>
</head>
<body>
<div id="d1">愿你过得好</div>
<p class="c1">神说赐我一个愿望</p>
<p>我说愿天下同</p>
<i class="c1">假的</i>
<hr>

</body>
</html>

　　伪类选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*<!--未访问过的地址-->*/
        a:link {color:red;}
        /*<!--访问过的地址-->*/
        a:visited {color:gold}
        /*鼠标移上去之后,我才给你改变颜色状态*/
        span:hover {color:green;}
        /*选定的链接:a标签被点击的哪一刻*/
        a:active {color:deepskyblue}
        /*input输入框获取焦点时的样式*/
        input:focus {
            outline:none;
            background-color:red;
        }

    </style>
</head>
<body>
<a href="http://4399.com">没有访问过的地址</a>
<a href="http://www.taobao.com">访问过的地址</a>
<span>帝如来</span>
<a href="http://www.jd.com">京东商城</a>
<hr>
<input type="text">
</body>
</html>

　　伪元素选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        div:first-letter {color:red;font-size: 48px}
        p:before {content: '*';color:gray;}
        p:after {content:'#';color:red}
    </style>

</head>
<body>
<div class="c1">该书汇集了卡耐基的思想精华和最激动人心的内容，是作者最成功的励志经典</div>
<p>该书汇集了卡耐基的思想精华和最激动人心的内容，是作者最成功的励志经典</p>
<p>该书汇集了卡耐基的思想精华和最激动人心的内容，是作者最成功的励志经典</p>
<p>该书汇集了卡耐基的思想精华和最激动人心的内容，是作者最成功的励志经典</p>
<p>该书汇集了卡耐基的思想精华和最激动人心的内容，是作者最成功的励志经典</p>
</body>
</html>

　　选择器的优先级

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style>
        #p1 {color:red}
        #p1 {color:green}
    </style>
    <link rel="stylesheet" href="01.css">
    <style>
        /*100*/
        #p1 {color:lightblue}
        /*20*/
        .c1>.c2 {color:yellow}
        /*10*/
        .c2 {color:green}
        /*1*/
        p {color:red}
        /*p {color:red!important;}*/
    </style>
</head>
<body>
<div class="c1">
    <p id="p1" class="c2">楼至韦驮</p>
</div>
</body>
</html>

20181010日学习笔记 - CSS

猜你喜欢