CSS-1

CSS 全称 Cascading Style Sheets,翻译过来就是层叠样式表,如果说HTML是网页的结构,那么CSS就是网页化妆师

CSS写法

CSS 有三种写法 ,直接写在标签内 ,写在 style 标签内 ,使用外部 .css 文件

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <!--引入格式二-->
    <style>
        p,div{
            background: blue;
            color: chartreuse;
        }
    </style>
    <!--引入格式三-->
    <style>
        @import "1.css"
    </style>
    <!--引入格式四-->
    <link rel="stylesheet" href="1.css" type="text/css"/>
</head>
<body>
<p style="background: aqua;color: red">CSS引入格式一</p>
<p>CSS引入格式二</p>
<div>CSS引入格式二</div>
<a href="#" >CSS引入格式三</a>
<h1>CSS引入格式四</h1>
</body>
</html>

<!--CSS引入格式一：直接在标签内设置-->
<!--CSS引入格式二：在head标签内加入<style>设置-->
<!--CSS引入格式三：设置CSS文本，比如1.css ,通过@import "1.css" 将css文件引入-->
<!--CSS引入格式四：设置CSS文本，比如1.css ,通过<link> 将css文件引入-->
<!--第三种方法缺陷：在整个网页文件装载完后，在装载css文件，网页文件过大时，会导致现出现无样式页面
闪烁一下之后在出现有样式的页面-->
<!--第四种是比较推荐的使用方法，现装载css文件，在装载网页文件-->

1.css 文件

a{
    background-color: crimson ;
    color: darkmagenta;
}
h1{
    background-color: black;
    color: azure;
}

网页显示

那么，对于CSS设置，他的优先级是什么样的呢。

CSS选择器

1、选择器是什么：CSS 的选择器是 CSS最基础也是最重要的一个知识点很重要
2、选择器权重：在现实社会中谁的权力大，就听谁的，同理，选择器权重也是一样，谁的权重值高，就应用谁的。
3、选择器的作用：用于准确的选中元素，并赋予样式

class选择器（类选择器）：

通过标签的 class 属性，选择对应的元素，借助了一个类的概念，一处定义，可以多处使用，类选择器以一个点"."号显示。
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        .div-1{
            color: darkorange;
            width: 300px;
            height: 200px;
            border:1px solid red;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="div-1">
    <p clsaa="div-1">class选择器</p>
</div>
</body>
</html>

id选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。且id选择器具有唯一性。
注意： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        #div-2{
            width: 300px;
            height: 200px;
            border:1px solid black;
            background-color: red;
        }
        #span-1{
            color: azure;
        }
    </style>
</head>
<body>
<div id="div-2">
    <span id="span-1">ID选择器---这是文本标签，文章的主体</span>
</div>
</body>
</html>

群组选择器：

1、element 群组选择器是可以同时选择多个标签的选择器
The element 选择器选择指定元素名称的所有元素。如：选择多有的p元素
p{
value: red
}

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
<p>p群组选择器</p>
<p>p群组选择器</p>
<div>div群组选择器</div>
<br/>
<div>div群组选择器
    <p>div p群组选择器</p>
    <p>div p群组选择器</p>
</div>
</body>
</html>

div{
width: 100px;
height: 100px;
background-color: red;
color: azure;
}

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            color: azure;
        }
    </style>
</head>
<body>
<p>p群组选择器</p>
<p>p群组选择器</p>
<div>div群组选择器</div>
<br/>
<div>div群组选择器
    <p>div p群组选择器</p>
    <p>div p群组选择器</p>
</div>
</body>
</html>

2、emelent,emelent群组选择器是可以同时选择所有的选中的标签的选择器，几个元素具有相同的样式，用逗号分隔每个元素的名称。
div,p{
width: 100px;
height: 100px;
background-color: yellow;
color: blue;
}

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        div,p{
            width: 100px;
            height: 100px;
            background-color: yellow;
            color: blue;
        }
    </style>
</head>
<body>
<p>p群组选择器</p>
<p>p群组选择器</p>
<div>div群组选择器</div>
<br/>
<div>div群组选择器
    <p>div p群组选择器</p>
    <p>div p群组选择器</p>
</div>
</body>
</html>

层次选择器

层次选择器分为，子代、后代、相邻和兄弟等四种选择器
1、子代选择器：element>element
div>p{
color: greenyellow;
}

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        div>p{
            color: greenyellow;
        }

    </style>
</head>
<body>
<p>我位于div之前</p>
<div>我是第一个div标签
    <span>我是div的子代span标签
        <p>我是div的后代，span子代标签</p>
    </span>
</div>
<div>我是第二个div标签
    <p>我是div的子代p标签</p>
</div>
</body>
</html>

2、element element 选择器用于选择元素内部的元素。后代选择器如：
div p{
color: greenyellow;
}

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        #div-1 p{
            color: greenyellow;
        }

    </style>
</head>
<body>
<p>我位于div之前</p>
<div id="div-1">我是第一个div标签
    <span>我是div的子代span标签
        <p>我是div的后代，span子代标签
            <span>我是p标签的子标签</span>
        </p>
    </span>
</div>
<div>我是第二个div标签
    <p>我是div的子代p标签</p>
</div>
</body>
</html>

3、兄弟选择器：
element~ element 选择器用于选择元素同级的元素。如：
p~span{
color: greenyellow;
}

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        p~span{
            color: greenyellow;
        }

    </style>
</head>
<body>
<p>我位于div之前</p>
<div id="div-1">我是第一个div标签
    <span>我是div的子代span标签
        <p>我是div的后代，span子代标签</p>
        <span>我是p标签的兄弟标签</span>
    </span>
</div>
<div>我是第二个div标签
    <p>我是div的子代p标签</p>
    <span>我是p标签的兄弟标签</span>
</div>
</body>
</html>

4、相邻选择器：
element+element选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        .p1+span{
            color: greenyellow;
        }

    </style>
</head>
<body>
<div id="div-1">我是第一个div标签 <br/>
    <span>我是p前面的span标签</span>
    <p class="p1">我是p标签</p>
    <span>我是p后面的span标签</span>
</div>
</body>
</html>

CSS选择器的权重

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        p{
            color: red;
        }
        .p1{
            color: yellow;
        }
        #d1{
            color: blue;
        }

    </style>
</head>
<body>
<p>没有class与id</p>
<p class="p1">只有class标签</p>
<p class="p1" id="d1">有class标签和id标签</p>
</body>
</html>

从上面可以看出，CSS选择器的权重是：
id>>>class>>>元素选择器：id最大，元素选择器最小。CSS的选择器最常用的就是上面所列，可以根据情况使用。

伪类选择器：

伪类选择器针对CSS中的<a></a>标签。超链接标签。
:link向未访问的链接添加特殊的样式。
注意: :link 选择器对已经访问的链接没有样式。
:visited向访问过的链接添加特殊的样式。
:active向活动的链接添加特殊的样式。当你点击一个链接时它变成活动链接。
:hover在鼠标移到链接上时添加的特殊样式。
提示: :hover 选择器器可用于所有元素，不仅是链接。
提示: 使用:link 选择器设置了未访问过的页面链接样式， :visited 选择器设置访问过的页面链接的样式，:hover选择器当有鼠标悬停在其上的链接样式，:active 选择器设置当你点击链接时的样式。为了产生预期的效果，在CSS定义中，:active必须位于:hover之后！！:hover 必须位于 :link 和 :visited 之后！！

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        a.ex1:hover,a.ex1:active {color:red;}
        a.ex2:hover,a.ex2:active {font-size:150%;}
        a.ex3:hover,a.ex3:active {background:red;}
        a.ex4:hover,a.ex4:active {font-family:monospace;}
        a.ex5:visited,a.ex5:link {text-decoration:none;}
        a.ex5:hover,a.ex5:active {text-decoration:underline;}
    </style>
</head>
<body>
<p>将鼠标移至链接上查看其样式改变.</p>

<p><a class="ex1" href="#">这个链接改变颜色</a></p>
<p><a class="ex2" href="#">这个链接改变字体大小</a></p>
<p><a class="ex3" href="#">这个链接改变背景颜色</a></p>
<p><a class="ex4" href="#">这个链接改变字体类型</a></p>
<p><a class="ex5" href="#">这个链接改变文字修饰</a></p>
</body>
</html>

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        a:link    {color:blue;}
        a:visited {color:green;}
        a:hover   {color:red;}
        a:active  {color:yellow;}
    </style>
</head>
<body>
<p>将鼠标移上并点击此链接: <a href="//www.baidu.com/">百度一下</a></p>
</body>
</html>

效果现实可以自己复制代码查看。

字体，文本

CSS常用的字体设置如下表：

参数	描述
font-family	字体选择
font-size	字体大小
font-style	字体样式
font-weight	字体粗细
font-variant	字体大小写
font	复合样式

注意：复合样式必须遵循一下的顺序，style>> variant >>weight >.size>>height>> family

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 400px;
            border:1px solid darkorange;
        }
        .p1{
            font-family: 楷体;
            font-size: 30px;
            font-style: italic;
            font-weight: bolder;
            color: mediumturquoise;
        }
        .p2{
            /*style>> variant >>weight >.size>>height>> family*/
            font: italic 20px 楷体;
            color: cadetblue;
        }
        .p3{
            font: italic 20px 楷体;
            color: red;
        }
    </style>
</head>
<body>
<div>
<p class="p1">满江红</p>
<p class="p2">岳飞</p>
<p class="p3">
    怒发冲冠，凭栏处、潇潇雨歇。
    抬望眼，仰天长啸， 壮怀激烈。
    三十功名尘与土，八千里路云和月。
    莫等闲，白了少年头，空悲切。
    靖康耻，犹未雪；
    臣子恨，何时灭？
    驾长车，踏破贺兰山缺。
    壮志饥餐胡虏肉，笑谈渴饮匈奴血。
    待从头，收拾旧山河，朝天阙。
</p>
</div>
</body>
</html>

CSS文本常用样式

参数	描述
text-align	文本对齐方式
text-indent	首行缩进
text-decoration	文本线
letter-spacing	字距
word-spacing	词距
line-height	行高

注意：在CSS中，单词与单词之间有空格，才会被认为不是一个词，词距才会产生效果。如：‘我现在在学习python’，这样写就是一个词，‘我现在在学习python’ 这就是两个词了。

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        div{
            width: 400px;
            height: 500px;
            border:1px solid darkorange;
        }
        .p1{
            font-family: 楷体;
            font-size: 30px;
            font-style: italic;
            font-weight: bolder;
            color: mediumturquoise;
        }
        .p2{
            /*style>> variant >>weight >.size>>height>> family*/
            font: italic 20px 楷体;
            color: cadetblue;
        }
        .p3{
            text-align: left;
            text-indent: 2em;
            letter-spacing: 0.5em;
            line-height: 1em;
            font: italic 20px 楷体;
            color: red;
        }
    </style>
</head>
<body>
<div>
<p class="p1">满江红</p>
<p class="p2">岳飞</p>
<p class="p3">
    怒发冲冠，凭栏处、潇潇雨歇。
    抬望眼，仰天长啸， 壮怀激烈。
    三十功名尘与土，八千里路云和月。
    莫等闲，白了少年头，空悲切。
    靖康耻，犹未雪；
    臣子恨，何时灭？
    驾长车，踏破贺兰山缺。
    壮志饥餐胡虏肉，笑谈渴饮匈奴血。
    待从头，收拾旧山河，朝天阙。
</p>
</div>
</body>
</html>

背景

参数	描述
background-color	背景颜色
background-image	背景图片
background-repeat	背景铺盖
background-size	背景尺寸大小
background-position	背景定位
background	复合样式

注意：CSS中背景的复合样式顺序：color>>image>>repeat>>position 如：
backgroud：red url(1.png) no-repeat center/;

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        #div-1{
            /*background-image: url(l.jpg);*/
            /*background-repeat: round;*/
            background-color: black;
            width: 534px;
            height: 400px;
            border:1px solid darkorange;
        }
        .p1{
            font-family: 楷体;
            font-size: 30px;
            font-style: italic;
            font-weight: bolder;
            color: white;
        }
        .p2{
            /*style>> variant >>weight >.size>>height>> family*/
            font: italic 20px 楷体;
            color: white;
        }
        .p3{
            text-align: left;
            text-indent: 2em;
            letter-spacing: 0.5em;
            line-height: 1em;
            font: italic 20px 楷体;
            font-weight: lighter;
            color: white;
        }
    </style>
</head>
<body>
<div id="div-1">
<p class="p1">满江红</p>
<p class="p2">岳飞</p>
<p class="p3">
    怒发冲冠，凭栏处、潇潇雨歇。
    抬望眼，仰天长啸， 壮怀激烈。
    三十功名尘与土，八千里路云和月。
    莫等闲，白了少年头，空悲切。
    靖康耻，犹未雪；
    臣子恨，何时灭？
    驾长车，踏破贺兰山缺。
    壮志饥餐胡虏肉，笑谈渴饮匈奴血。
    待从头，收拾旧山河，朝天阙。
</p>
</div>
</body>
</html>

字体，背景等的设置还有很多，需要的时候可以查阅资料或互联网，在这里就不一一赘述了。

最后编辑于：2019.05.21 11:17:52

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,029评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,238评论 3赞 388
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,576评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,214评论 1赞 287
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,324评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,392评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,416评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,196评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,631评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,919评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,090评论 1赞 342
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,767评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,410评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,090评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,328评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,952评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,979评论 2赞 351