07-CSS样式

2018-12-01 本文已影响2人努力爬行中的蜗牛

CSS，层叠样式表。

有了CSS后，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现样式完全交给CSS，html文档变得更加简洁。

CSS基本语法以及页面引用

css基本语法
css页面引入方法：
1、外联式：通过link标签，链接外部样式表到页面中。

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

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">
        h3 {
            font-size: 20px;
            color:gold;
        }
</style>

3、内联式：通过标签的style属性，在标签上直接写样式。

<a href="http://www.itcat.cn" style="font-size: 20px;color: blue">

选择器{属性：值；属性：值；属性：值；}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。

div {
    font-size: 20px;
    color: red;
}

css文本设置

常用的应用文本的css样式：

color 设置文字的颜色，如：color：red；
font-size 设置文字的字体，如：font-family:'微软雅黑'
font-sytle 设置字体是否倾斜，如font-style:'normal';设置不倾斜，font-style：'italic';设置文字倾斜
font-weight 设置文字是否加粗，如font-weight:bold;设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，设置行高相当于在每行位子的上下同事加间距，如：line-height：24px
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：font：是否加粗字号/行号字体；如font:normal 12px/36px '微软雅黑'
text-decoration 设置文字的下划线，如text-decoration:none;将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px;设置文字首行缩进24px
text-aligh 设置文字水平对齐方式,如text-align:center 设置文字水平居中

<!DOCTYPE html>
<html>
<head>
    <title>常用文本样式</title>

    <style type="text/css">
        div {
            /*font-size: 20px;
            font-style: italic;
            font-weight: bold;*/
            font:normal 20px/40px 'Microsoft Yahei';
            color: green;
            /*font-family: 'Microsoft Yahei';
            line-height: 40px;*/
            text-decoration: underline;
            text-indent: 40px;
        }

        em {
            font-style: normal;
            color: red
        }

        h3 {
            font-weight: normal;
        }

        a {
            text-decoration: none;
        }

        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>文本样式</h3>

    <div>
        <em>font </em>同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：font：是否加粗 字号、行号字体；如font:normal 12px/36px '微软雅黑'
    </div>

    <p>这是div标签</p>

    <a href="https://www.baidu.com">百度链接</a>
</body>
</html>

css颜色表示法

css颜色值主要有三种表示方法：

颜色名表示，比如：red 红色，gold 金色
rgb表示，如：rgb（255，0，0）表示红色
16进制数值表示，比如：#ff0000表示红色，这种可以简写成#ff0

div {
        font-size: 30px;
        /*color: rgb(255,0,0);*/
        color: #00ff00;
    }

css选择器

标签选择器

<style type="text/css">
    * {
        font-size: 20px;
    }

    div {
        color: red;
    }
</style>

id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用

<style type="text/css">
        * {
            font-size: 20px;
        }

        div {
            color: red;
        }

        #div1 {
            font-size: 30px;
            color: blue;
        }
    </style>

类选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css选择器</title>

    <style type="text/css">
        * {
            font-size: 20px;
        }

        div {
            color: red;
        }

        #div1 {
            font-size: 30px;
            color: blue;
        }

        .green {
            color: green;
        }

        .big {
            font-size: 40px;
        }
    </style>
</head>
<body>

    <div id="div1" class="big">这是一个div</div>

    <div class="green big">这是第二个div</div>
    
    <div>这是第三个div</div>

    <p class="green">这是p标签</p>

</body>
</html>

层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>

    <style type="text/css">
        .box {
            font-size: 20px;
            line-height: 30px;
            text-indent: 40px;
        }

        .box span {
            color: red;
            font-weight: bold;
        }

        .box em {
            font-style: normal;
            text-decoration: underline;
            font-weight: bold;
            color: pink;
        }

        .box .span02 {
            color: blue;
            font-size: 25px;
        }

    </style>
</head>
<body>
    <div class="box">
        主要应用在选择父元素下的子元素，或者<span>子元素下</span>面的子元素，可与标签元素结合使用，<span class="span02">减少命名</span>，同时也可以通过层级，<em>防止命名冲突</em>。
    </div>

    <div class>
        主要应用在选择父元素下的子元素，或者<span>子元素下</span>面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
    </div>

</body>
</html>

组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>

    <style type="text/css">
        .box01,.box02,.box03 {
            font-size: 20px;
            text-indent: 40px;
        }

        .box01 {
            color: red;
        }

        .box02 {
            color: pink;
        }

        .box03 {
            color: gold;
        }
    </style>
</head>
<body>
    <div class="box01">这是第一个div</div>
    <div class="box02">这是第二个div</div>
    <div class="box03">这是第三个div</div>

</body>
</html>

伪类以及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before何after，他们可以通过样式在元素中插入内容

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>

    <style type="text/css">
        .link {
            font-size: 30px;
            text-decoration: none;
            color: pink;
        }

        .link:hover {
            color: green;
            font-weight: bold;
            font-style: italic;
        }

        .box01,.box02 {
            font-size: 20px;
        }

        .box01:before {
            content: ".";
            color:red;
        }

        .box02:after {
            content: "。";
            color: red;
        }
    </style>
</head>
<body>
    <a href="http://www.itcast.cn" class="link">传智播客</a>

    <div class="box01">这是第一个div</div>

    <div class="box02">这是第二个div</div>
</body>
</html>