CSS

1.HTML是一个骨架，CSS是衣服

2.CSS是什么？层叠、样式、表

3.CSS样式如何引入？

截图部分

（1）直接写在标签里面

<p style="color: green">哈哈</p>

（2）在head中通过style标签定义

<head>
    <meta charset="UTF-8">
    <title>CSS引入示例</title>
    <style> <!-- 不常用的写样式，直接写在标签里 -->
        p {  <!-- p标签统一使用这个样式 -->
            color: red;
        }
    </style>
</head>

（3）把样式写在单独的css文件中，然后html文件中通过link标签导入css样式

<head>
    <meta charset="UTF-8">
    <title>CSS引入示例</title>
    <link rel="stylesheet" href="index.css">    <!-- 引入index.css文件样式内容. 常用的写样式，样式写在css文件中 -->
</head>
<body>

4.CSS语法

（1）截图部分

（2）语法：选择器 {样式1;样式2;}：

4.1注释与习惯

/*
解释性的信息，包括这个文件什么时间写的，为哪个项目写的
*/

/*全局通用的样式*/
p {
    color: red;
    font-size: 48px;
}

/*导航条的样式*/

/*商品列表样式*/

4.2选择器

　　选择器用来找到那个要渲染的标签。

　　标签选择器（元素选择器）：适用于统一标签的默认样式

　　ID选择器：适用于特定标签设置特定样式

　　类选择器：适用于给某一些标签设置相同的样式

（1）基本选择器

（2）通用选择器，可以用来设置整个网站的背景颜色，边框之类的，默认字体大小之类的

（3）html代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS引入示例</title>
    <style> <!-- 不常用的写样式，直接写在标签里 -->
        p {  <!-- p标签统一使用这个样式 -->
            color: red;
        }
    </style>
    <link rel="stylesheet" href="index.css">    <!-- 引入index.css文件样式内容到本html中. 常用的写样式，样式写在css文件中 -->
</head>
<body>

<p>海燕</p>
<p style="color: green">哈哈</p>


<p id="pid1">嘿嘿</p>
<p class="c1 c2">阿斯蒂芬</p>   <!-- class。表示使用了哪几个类的样式，这里表示使用了c1和c2这两个类的样式-->

</body>
</html>

（4）CSS代码示例

/*
解释性的信息，包括这个文件什么时间写的，为哪个项目写的
*/

/*元素标签选择器*/
p {
    color: red;
}

h1 {
    color: green;
}

/*id选择器*/
#pid1 {
    color: blue;
}

/*类选择器*/
.c1 {
    color: yellow;
}

/*通用选择器，设置所有的字体大小*/
* {
    font-size: 48px;
}

/*导航条的样式*/

/*商品列表样式*/

（5）效果图

（6）组合选择器

（7）html代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>组合选择器示例</title>
    <link rel="stylesheet" href="index2.css">
</head>
<body>

<div id="d1">
    <p>我是嵌套在div标签中的p标签</p>
    <span>我是嵌套在div标签中的span标签</span>
    <div>
        <p>我是嵌套在div标签中的div标签中的p标签</p>
        <span>我是嵌套在div标签中的div标签中的span标签</span>
    </div>
</div>

<!-- 毗邻标签 -->
<p>2323</p>
<div>111</div>
<p>222</p>
<p>22233333</p>

</body>
</html>

（8）CSS代码示例

/*组合选择器示例的CSS文件*/

/*后代选择器*/
/*#d1 p { !* 从id为d1的标签中找到其包含的所有的p标签，对其设置样式*!*/
    /*color: red;*/
/*}*/


/*儿子选择器*/
#d1>p { /* 只改变d1标签儿子的标签为p1的标签，儿子的后代不去管*/
    color: green;
}

/*毗邻选择器*/
div+p { /* 只改变和div标签同级，并且是挨着div标签的下面的标签的样式, */
    color: yellow;
}

/*弟弟选择器*/
div~p { /*改变div同级下面所有的p标签的样式*/
    color: blue;
}

（9）属性选择器

（10）不常用的几个属性选择器

（11）html代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>属性选择器示例</title>
    <link rel="stylesheet" href="index3.css">
</head>
<body>
<div s9>哈哈</div>
<p s9="好">我是一个p标签，带有一个自定义的s9属性</p>
<p s10="good">我是一个p标签，带有一个自定义的s10属性</p>
<p>我是一个p标签</p>

</body>
</html>

（12）css示例

/*属性选择器相关样式*/



/* 属性选择器 */
[s9] { /* 设置所有有s9属性的标签的样式 */
    color: red;
}

p[s9] { /* 设置p标签中所有有s9属性的标签的样式 */
    color: blue;
}

p[s10="good"] { /* 设置p标签中有s10属性的,并且s10属性值等于good的标签的样式 */
    color: yellow;
}

/*p[s9] { !*找到*!*/
    /*color: red;*/
/*}*/

（13）效果图

4.2分组和嵌套

（1）html代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>分组和嵌套示例</title>
    <link rel="stylesheet" href="index4.css">
</head>
<body>

<div id="d1">我是一个div</div>
<p>我是一个p标签</p>

</body>
</html>

（2）CSS代码示例

/*分组和嵌套示例*/


/*当不同标签的样式有重复的时候，可以用逗号将多个标签分开，表示将这几个标签设置为一组，共同用一个样式*/
div,
p { /*div和p标签都用这个样式*/
    color: red;
}

/*嵌套使用选择器*/
#d1+p { /*使用d1找到那个div标签，然后设置和这个div标签毗邻的下面/右面的p标签的样式*/
    color: blue;
}

5.选择器优先级

5.1CSS继承

5.2样式优先级

　　（1）选择器都一样的情况下，谁靠近标签，谁就生效

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>分组和嵌套示例</title>
    <link rel="stylesheet" href="index4.css">
    <link rel="stylesheet" href="index44.css">  <!-- 这个样式文件挨着下面的标签，如果此文件中的选择器与index4.css中的选择器一样，则会使用这个文件的样式-->
</head>
<body>

<div id="d1">我是一个div</div>
<p>我是一个p标签</p>

</body>
</html>

　　（2）直接在标签里面写样式的叫做内联样式，这种样式的优先级最高

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>分组和嵌套示例</title>
    <link rel="stylesheet" href="index4.css">
    <link rel="stylesheet" href="index44.css">
</head>
<body>

<div id="d1">我是一个div</div>
<p style="color: red">我是一个p标签</p>  <!-- 这种内联样式的优先级最高 -->

</body>
</html>

　　（3）权重越大的优先级越高。

/*分组和嵌套示例*/


/* 权重等于100 + 1*/
#d1+p {
    color: aqua;
}

/*当不同标签的样式有重复的时候，可以用逗号将多个标签分开，表示将这几个标签设置为一组，共同用一个样式*/
div,
p { /*div和p标签都用这个样式*/
    color: green!important; /*-- 加上important强制生效，不推荐使用 */
}

/* 权重等于1+ 1*/
div+p {
    color: bisque;
}

/*!*!*嵌套使用选择器*!*!*/
/*!*#d1+p { !*使用d1找到那个div标签，然后设置和这个div标签毗邻的下面/右面的p标签的样式*!*!*/
    /*!*color: blue;*!*/
/*}*/

5.3CSS选择器的补充

（1）伪类选择器

<!DOCTYPE html>
<html lang="zh-CN">
<!-- a:link 所有没有访问过的a标签，设置样式 -->
<!-- a:visited 对访问过的a标签，设置样式 -->
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*连接没有被点击过*/
        a:link {
            color: beige;
        }

        /*连接被点击过*/
        a:visited {
            color: red;
        }

        /*鼠标移到标签上后标签的样式*/
        a:hover {
            color: blueviolet;
        }

        /*被选定*/
        a:active {
            color: darkslategrey;
        }

        /* input获取光标时的设置的样式 */
        input:focus {
            outline: 0;
            background: blueviolet;
        }
    </style>
</head>
<body>

<a href="http://www.sohug.com">搜狗</a>
<a href="http://www.baidu.com">百度</a>

<input type="text">

</body>
</html>

（2）伪元素选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        /*设置首字母的样式*/
        p:first-letter {
            font-size: 48px;
            color : red;
        }

        /*使用css样式在p标签前面加上内容*/
        .c1:before {
            content: "*";
            color: red;
        }

        /*使用css样式在p标签后面添加内容*/
        .c1:after {
            content: "[?]";
            color: blue;
        }
    </style>
</head>
<body>

<p>
    在苍茫的大海上，狂风卷积着乌云
    在苍茫的大海上，狂风卷积着乌云
    在苍茫的大海上，狂风卷积着乌云
    在苍茫的大海上，狂风卷积着乌云
    在苍茫的大海上，狂风卷积着乌云
    在苍茫的大海上，狂风卷积着乌云
    在苍茫的大海上，狂风卷积着乌云
    在苍茫的大海上，狂风卷积着乌云
    在苍茫的大海上，狂风卷积着乌云
</p>

<p class="c1">在苍茫的大海上，狂风卷积着乌云</p>
<p class="c1">在苍茫的大海上，狂风卷积着乌云</p>
<p class="c1">在苍茫的大海上，狂风卷积着乌云</p>

</body>
</html>

posted @ 2018-12-02 15:58 _小溢阅读(220) 评论(0) 收藏举报

刷新页面返回顶部

_小溢

CSS

公告