045_CSS

时间:2019-06-12
本文章向大家介绍045_CSS，主要包括045_CSS使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

一，CSS介绍

　　CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

二，CSS语法

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS注释

/*这是注释*/

　　

三，CSS的几种引入方式

　　3.1，行内样式

　　　　　行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

　　3.2，内部样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            /*内部样式*/
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

　　3.3，外部样式

 　　　　外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

　　

四，CSS选择器

4.1，基本选择器

　　4.1.1，元素/标签 选择器

p {color: "red";}　　/*所有p标签*/

被修饰标签举例
<p style="color:blue">标签选着器  P标签字体颜色2</p>

　　4.1.2，ID选择器

/*ID选着器*/
#P3 { color: black;}  /*所有标签id是P3的*/

被修饰标签举例
<p id="P3">ID选着器字体P3</p>

　　4.1.3，类选择器

/*类选着器*/
.c1 { color: yellow;}       /* 所有类名是c1的 */

p.c1 { font-size: 14px;}   /* p标签中所有类名是c1的 */

.c2,                        /* 使用多个类，用逗号隔开 */
.c3{
    color: #ff6700;
}

被修饰的标签举例
<p class="c1">类选着器字体</p>
<p class="c1">类选着器字体</p>
<p class="c1 c2 c3">类选着器字体</p>  /*多个类，用空格分隔*/

注意：

标签中样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

 CSS中使用多个类定义同一个样式时，多个类要用逗号隔开。

 

　　4.1.4，通用选择器

* {               /* 所有标签的样式 */   
  color: white;
}

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS引入示例</title>

    <!--第 1 种 p 标签内容设置颜色，分别使用，不然按顺序最后一个-->
    <style>
        p{color:green;}
    </style>
    <!--第 2 种 p 标签内容设置颜色，分别使用，不然按顺序最后一个-->
    <link rel = "stylesheet" href = "index_CSS.css">    <!--引入css文件-->

</head>
<body>

<p>标签选着器  P标签字体颜色1</p>
<!--第 3 种 p 标签内容设置颜色，分别使用，不然按顺序最后一个-->
<p style="color:blue">标签选着器  P标签字体颜色2</p>

<p id="P3">ID选着器字体P3</p>

<p class="c1">类选着器字体</p>
<p class="c1">类选着器字体</p>
<p class="c1 c2 c3">类选着器字体</p>

</body>
html
/*格式顺序*/
    /*解释性的信息*/
    /*全局通用样式*/
    /*商品列表样式*/

/*标签选着器*/
p { color: red;           /*所有p标签*/
    font-size: 18px
}

/*ID选着器*/
#P3 { color: black;}   /*所有标签id是P3的*/

/*类选着器*/
.c1 { color: yellow;}
p.c1 { font-size: 14px;}   /* p标签中所有类名是c1的 */

.c2,
.c3{
    color: #ff6700;
}
CSS

 

4.2，组合选择器

　　4.2.1，后代选择器

/*后代选择器*/
#d1 p { color: red;}    /*从id是d1的标签里找后代（儿子，孙子）中的所有p标签*/

　　4.2.2，儿子选择器

/*儿子选择器*/
#d1>p { color: greenyellow;}   /*从id是d1的标签里找儿子中的所有p标签*/

　　4.2.3，毗邻选择器

/*毗邻选择器*/
div+p { color: yellow;}    /*找同一级别嵌套里面的上一个是div标签的p标签*/
　　　　　　　　　　　　　　　　　/*选择所有紧接着<div>元素之后的<p>元素*/

　　4.2.4，弟弟选择器

/*弟弟选择器*/
p~div { color: blue;}   /*p标签后面所有的兄弟(同级嵌套中的)div标签*/

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>组合选择器示例</title>
 6     <link rel="stylesheet" href="组合选择器CSS.css">
 7 </head>
 8 <body>
 9 
10 <!--后代,儿子-->
11 <div id="d1">
12     <p>我是嵌套在div中的p标签</p>
13     <span>我是嵌套在div中的span标签</span>
14     <div>
15         <p>我是嵌套在div中div中的p标签</p>
16         <span>我是嵌套在div中div中的span标签</span>
17     </div>
18 </div>
19 
20 <!--毗邻-->
21 <div>毗邻11</div>
22 <p>毗邻22</p>
23 
24 <!--弟弟-->
25 <p>弟弟11</p>
26 <div>弟弟222</div>
27 <div>弟弟333</div>
28 
29 </body>
30 </html>
html
/*组合选择器示例的CSS文件*/

/*后代选择器*/
#d1 p { color: red;}    /*从id是d1的标签里找后代（儿子，孙子）中的所有p标签*/

/*儿子选择器*/
#d1>p { color: greenyellow;}   /*从id是d1的标签里找儿子中的所有p标签*/

/*毗邻选择器*/
div+p { color: yellow;}    /*找同一级别嵌套里面的上一个是div标签的p标签*/

/*弟弟选择器*/
p~div { color: blue;}   /*p标签后面所有的兄弟(同级嵌套中的)div标签*/
CSS

 

4.3，属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器示例</title>
    <link rel="stylesheet" href="属性选择器CSS.css">
</head>
<body>

<p s9="hao">我是一个p标签</p>
<p s9="good">我也是一个p标签</p>

<p s9="meima">我是一个p标签</p>
<p s9="meier">我是一个p标签</p>

<p>我是一个没有id的p标签</p>

<p s9="mingtian">我是一个p标签</p>
<p s9="huaitian">我是一个p标签</p>

<p s9="minghello ">我是一个p标签</p>
<p s9="huaihello">我是一个p标签</p>

<p s9="huai hello">我是一个p标签</p>


</body>
</html>
html
/*用于选取带有指定属性的元素*/
[s9] { color: red;}

/*限定属性是hao的*/
[s9="hao"] { color: greenyellow;}

　　

/*以mei开头的*/
[s9^="mei"] { color: brown;}

/*以tian结尾的*/
[s9$="tian"] { color: darkblue;}

/*属性名中包含hello的*/
[s9*="hello"] { color: cyan;}

/*属性为多个值时，其中一个值为 hello的元素*/
[s9~="hello"] { color: coral;}
其他不常用的

4.4，分组和嵌套

　　4.4.1，分组

　　当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

HTML示例：

被修饰标签示例
<div id="d1">我是一个div标签</div>
<p>我是一个p标签</p>

　　下面CSS文件内容：

/*当样式有重复的时候, 选择器可以放在一起,之间用","隔开*/
div { color: red;}
p { color: red;}
/*上两句可以写成下面的方式*/
#d1,
p { color: red;}      /*推荐分行写选择器*/

　　4.4.2，嵌套

　　HTML示例：

<div class="c1">
    <P>嵌套1</P>
</div>

　　多种选择器可以混合起来使用，（组合选择器）

/*多种选择器可以混合起来使用*/
#d2+p { color: blue;}
/*c1类内部所有p标签设置字体颜色为红色*/
.c1 p { color: greenyellow;}

　　

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

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

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


<div class="c1">
    <P>嵌套1</P>
</div>



</body>
</html>
html
/*分组和嵌套示例*/

/*当样式有重复的时候, 选择器可以放在一起,之间用","隔开*/
div { color: red;}
p { color: red;}
/*上两句可以写成下面的方式*/
#d1,
p { color: red;}      /*推荐分行写选择器*/

/*嵌套使用选择器*/
/*多种选择器可以混合起来使用*/
#d2+p { color: blue;}
/*c1类内部所有p标签设置字体颜色为红色*/
.c1 p { color: greenyellow;}
CSS

4.5，伪元素选择器

　　标签选择器：伪类属性{属性}

　　4.5.1，first-letter

 /*<!--第一个字样式-->*/
p:first-letter {
    font-size: 48px;
    color:red;
}

　　4.5.2，before

/*在每个c1段落前加内容*/
.c1:before {
　　content: "*";
　　color: red;
}

　　4.5.3，after

/*在每个c1段落后加内容*/
.c1:after {
　　content: "[?]";
　　color: blue;
}

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>为元素选择器示例</title>
    <style>
        /*<!--第一个字样式-->*/
        p:first-letter {
            font-size: 48px;
            color:red;
        }

        /*在每个c1段落前加内容*/
        .c1:before {
            content: "*";
            color: red;
        }

        /*在每个c1段落后加内容*/
        .c1:after {
            content: "[?]";
            color: blue;
        }

        /*段落字体*/
         p {
             font-size: 30px;
         }
    </style>
</head>
<body>

<p>
    木马最核心的一个要求必须是能够将服务器端植入目标主机
    木马最核心的一个要求必须是能够将服务器端植入目标主机
    木马最核心的一个要求必须是能够将服务器端植入目标主机
</p>

<p class="c1">木马最核心的一个要求必须是能够将服务器端植入目标主机</p>
<p class="c1">木马最核心的一个要求必须是能够将服务器端植入目标主机</p>
<p class="c1">木马最核心的一个要求必须是能够将服务器端植入目标主机</p>




</body>
</html>
实例

　　4.5.4，其它部分伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类属性</title>
    <style>
       /*更改没有点过的链接标签样式*/
        a:link {
            color: burlywood;
        }

        /*更改点过的链接标签样式*/
        a:visited {
            color: green;
        }

        /*鼠标移上去链接标签变色*/
        a:hover {
            color:deeppink;
        }

        /*这些其他标签也可以用*/
        #d1:hover {
            color: greenyellow;
        }

        /*被选定链接标签变色*/<						



						

						原文地址：https://www.cnblogs.com/eternity-twinkle/p/10999818.html
随机文章
WEB前端知识点必读
最近更新
Copyright (C) 2015 www.manongjc.com, All Rights Reserved. 版权所有 码农教程
备案号：鄂ICP备2022014784号-1