时间戳

首页 > 技术文章 > 前端 --> CSS基础

前端 --> CSS基础

xt12321 2019-05-29 20:32 原文

*****2019.05.30 补充的 css样式：  https://www.cnblogs.com/xt12321/p/10951577.html  *******

前端之CSS基础

　　一、语法结构
　　二、三种引入css样式的方式
　　三、学习css的流程

写在前面

css:层叠样式表

万行代码，注释先行：

/*单行注释*/
/*
多行注释
*/

一、语法结构：

   选择器 {属性:属性值;属性：属性值;}

二、三种引入css样式的方式

1.head内style标签内部直接书写css代码
2.link标签引入外部css文件
3.直接在标签内通过style属性书写css样式
ps:注意页面css样式通常都应该写在单独的css文件中

三、学习css的流程

3.1 先学如何直接查找标签
(1) 基本选择器
     标签选择器
     id选择器
     类选择器
     通用选择器
(2) 组合选择器
     后代选择器
     儿子选择器
     毗邻选择器
     弟弟选择器
(3) 属性选择器
补充：分组与嵌套
(4) 伪类选择器
(5) 伪元素选择器
3.2 如何修改标签样式
(1) 宽高、字体
(2) 字体颜色
(3) 文本属性
(4) 背景属性
(5) 边框
(6) 画圆
(7) display属性
(8) visibility:hidden与display的区别

 

3.1 先学如何直接查找标签
(1) 基本选择器
标签选择器
    id选择器
    类选择器
    通用选择器
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天的网页</title>
    <style>
        div {
            color: red;
        }
        #third_s {
            color: blue;
        }
        .fourth {
            color: orange;
        }
        * {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div style="font-size: 15px"> 用来做对比的</div>
    <div>这是第一句话</div>
    <div>这是第二句话</div>
    <span id="third_s">这是第三句</span>
    <span class="fourth">这是第四句</span>
    <div>这是第五句话</div>
</body>
</html>
基本选择器

 

 

(2) 组合选择器
后代选择器
    儿子选择器
    毗邻选择器
    弟弟选择器
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天的网页</title>
    <style>
        /*后代选择器：控制div里面的所有span标签 */
        div span {
            font-size: 30px;
        }
        /*儿子选择器：控制div里面的第一层的span标签*/
        div>span {
            color: red;
        }
        /*毗邻选择器：控制离div最近的span标签*/
        div+span {
            color: blue;
        }
        /*!*弟弟选择器*!*/
        /*div~span {*/
            /*color: deeppink;*/
        /*}*/
    </style>
</head>
<body>
    <div>
        <span>这是div里面的span1</span><br>
        <span>这是div里面的span2</span>
        <p>
            <span>这是div里面的div里面的span</span>
        </p>
    </div>
    <div>这是第二句话</div>
    <span>这是第三句</span>
</body>
</html>
组合选择器

 

(3) 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天的网页</title>
    <style>
        /*所有叫sx的属性都会被操作*/
        [sx] {
            color: orange;
        }
        /*所有sx="1"的属性都会被操作*/
        [sx='1'] {
            font-size: 20px;
        }
        /*所有在p标签里面的sx="1"的属性都会被操作*/
        /*span和[sx='2']之间要贴着写*/
        span[sx='2'] {
            font-size: 25px;
        }
    </style>
</head>
<body>
    <p sx>只有属性名的p</p>
    <p sx="1">有属性名又有属性指的p1</p>
    <p sx="1">有属性名又有属性指的p1</p>
    <p sx="2">有属性名又有属性指的p2</p>
    <span sx="2">有属性名又有属性指的p3</span>
</body>
</html>
属性选择器

 

 

补充：分组与嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天的网页</title>
    <style>
        /*分组操作*/
        div,p,span {
            color: deeppink;
        }
        /*嵌套操作*/
        div p,span {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div>this is div1</div>
    <p>this is p1</p>
    <span>this is span1</span>

    <div>
        <p>this is p2</p>
    <span>this is span2</span>
    </div>
</body>
</html>
分组与嵌套

 

(4) 伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天的网页</title>
    <style>
        /*连接的颜色*/
        a:link {
            color: red;
        }
        /*鼠标悬浮在链接上面触发*/
        a:hover {
            color: blueviolet;
        }
        /*点击链接时触发*/
        a:active {
            color: orange;
        }
        /*点击访问过的链接的颜色*/
        a:visited {
            color: #000aff;
        }

    </style>
</head>
<body style="font-size: 30px">
    <a href="https://www.sogo.com">搜狗</a>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://500px.com">500px</a>
</body>
</html>
伪类选择器

 

(5) 伪元素选择器

******************************这里有个东西***************************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天的网页</title>
    <style>
        p:first-letter {
            font-size: 30px;
        }
        /*在开头加*/
        p1:before {
            content: '这几个字是加进去的！';
        }
        /*在结尾加*/
        p1:after {
            content: '这个也是加进去的！';
        }

    </style>
</head>
<body>
    <p>
        这是一段话啊，但是我不知道写些什么东西！
    </p>
    <p1>
        这是也一段话啊，但是我也不知道写些什么东西！
    </p1>
</body>
</html>
伪元素选择器

 

3.2 如何修改标签样式
(1) 宽高、字体
(2) 字体颜色
(3) 文本属性
(4) 背景属性
(5) 边框
(6) 画圆
(7) display属性
(8) visibility:hidden与display的区别

******************************这里有个东西***************************

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天的网页</title>
    <style>
        div {
            width: 200px;
            border: 1px solid blueviolet ;
            text-align: center;
        }
        a { text-decoration: none; }
    </style>
</head>
<body>
    <div> 这是一个div </div>
    <p style="color: red;">
        这个是为了试颜色的1
    </p>
    <p style="color: rgb(0,0,255);">
        这个是为了试颜色的2
    </p>
    <p style="color: #00ff2c;">
        这个是为了试颜色的3
    </p>
    <p style="color:rgba(100,255,100,0.5);">
        这个是为了试颜色的4
    </p>
    <a href="">这是一个超链接</a>
    <p>我也不知道为什么下面会出现这个讨厌的横线，只知道去掉div的css会消失</p>
</body>
</html>
标签样式

 

******************************这里有个东西***************************

 

******************************这里有个东西***************************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天的网页</title>
    <style>
        #first {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second {
            width: 100%;
            height: 200px;
            background-image: url("doge.png");
        }
        #third {
            width: 100%;
            height: 200px;
            background: no-repeat center url("doge.png") blue;
        }
    </style>
</head>
<body>
    <div id="first">
        这是一个div
    </div>
    <div id="second">
        this is div too
    </div>
    <div id="third">
        this is div too too
    </div>
</body>
</html>
上面那张图的--背景属性

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天的网页</title>
    <style>
        #first {
            width:100%;
            height: 400px;
            border: 2px solid red;
        }
        #second {
            width:200px;
            height: 200px;
            border: 2px solid red;
            border-radius: 50%;
            background-image: url("doge.png");
        }
        .c1 {
            height: 400px;
            background-color: #000aff;
        }
        .box {
            height: 400px;
            background: url("doge.png") ;
            background-attachment: fixed;
        }
        .c2 {
            height: 400px;
            background-color: #ff0100;
        }
    </style>
</head>
<body>
    <div id="first" >
        这还是个div
    </div>
    <div id="second">
        这是一个圆
    </div>


    <div class="c1"></div>
    <div class="box"></div>
    <div class="c2"></div>


</body>
</html>
下面那张图的 --背景属性--例子

 

******************************这里有个东西***************************

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天的网页</title>
    <style>
        span {
            display: none;
        }
        div {
            display: inline;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
    <p>p1</p>
    <p>p2</p>
</body>
</html>
display属性

 

 

 

******************************下面是总结**********************************

总结：选择器的优先级：
    思路：
        相同选择器，不同的引入方式
        不容的选择器，相同的引入方式

    行内样式 > id选择器 > 类选择器 > 标签选择器


标签通常都必须有的属性
    id用来唯一标识标签
    class 标签类属性，可以有多个值
    ps:可以理解为Python中的继承

可以给任意的标签加任意的属性名和属性值

 

推荐阅读