美文网首页
CSS-1

CSS-1

作者: 昆仑草莽 | 来源:发表于2019-05-20 14:27 被阅读0次

    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>

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

    相关文章

      网友评论

          本文标题：CSS-1

          本文链接：https://www.haomeiwen.com/subject/okdhzqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|CSS-1|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！