CSS概述

什么是CSS，有什么作用？
CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是：
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
CSS好比是HTML的化妆品一样。
HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。

HTML中引入CSS样式的三种方式

内联定义方式

<!doctype html>
<html>
    <head>
        <title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
    </head>
    <body>

        <!--
            width 宽度样式
            height 高度样式
            background-color 背景色样式
            display 布局样式（none表示隐藏，block表示显示）
        -->
        <div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
      border-color : red;border-width : 1px;border-style : solid;"></div>

        <br><br>

        <!--
            样式还能这样写：
                border : 1px solid black;
        -->
        <div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
      border : 1px solid black;"></div>

    </body>
</html>

样式块方式

id选择器

语法格式：
   #id{
      样式名 : 样式值;
      样式名 : 样式值;
      样式名 : 样式值;
      ....
   }

标签选择器

语法格式：
   标签名 {
      样式名 : 样式值;
      样式名 : 样式值;
      样式名 : 样式值;
      ....
   }
标签选择器作用的范围比id选择器广。

类选择器

语法格式：
   .类名{
      样式名 : 样式值;
      样式名 : 样式值;
      样式名 : 样式值;
      ....
   }

<!doctype html>
<html>
    <head>
        <meta charset="gbk">
        <title>HTML中引入CSS样式的第二种方式：样式块</title>
        <style type="text/css">
            /* id选择器 */
            #usernameErrorMsg {
                color : red;
                font-size : 12px;
            }
            /* 标签选择器 */
            div {
                background-color : black;
                border : 1px solid red;
                width : 100px;
                height : 100px;
            }
            /* 选择器 */
            .student {
                border : 1px solid red;
                width : 400px;
                height : 30px;
            }

      </style>
    </head>
    <body>

        <!--
            设置样式字体大小12px，颜色为红色！
        -->
        <span id="usernameErrorMsg">对不起，用户名不能为空！</span>

        <div></div>
        <div></div>
        <div></div>

        <!--class相同的标签可以认为是同一类标签。-->
        <br><br><br>
        <input type="text" class="student"/>

        <br><br><br>

        <select class="student">
            <option>专科</option>
            <option>本科</option>
        </select>

    </body>
</html>

引入外部独立的css文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="gbk">
        <title>在HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>

        <!--引入css-->
       <link rel="stylesheet" type="text/css" href="css/1.css"/>

    </head>
    <body>

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

        <span id="baiduSpan">点击我链接到百度哦！</span>
    </body>
</html>

列表样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="gbk">
        <title>列表样式</title>

        <style type="text/css">
           ul{
              /*list-style-type: none;*//*去除前面的标记*/
              /*list-style-type: circle ;*/
              list-style-type: square ;
           }
        </style>
    </head>
    <body>
        <ul>
            <li>中国
                <ul>
                    <li>北京</li>
                    <li>上海</li>
                    <li>重庆</li>
                </ul>
            </li>
            <li>美国</li>
            <li>俄国</li>
        </ul>
    </body>
</html>

CSS样式的绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS样式的绝对定位</title>
        <style type="text/css">
            #div1{
                background-color: red;
                border: 1px black solid;
                width: 300px;
                height: 300px;
                position : absolute; /*绝对定位*/
                left: 100px;
                top: 100px;
            }
        </style>
    </head>
    <body>

        <div id="div1"></div>

    </body>
</html>

来源：CSDN

作者：TMLNICK

链接：https://blog.csdn.net/cd_laotang/article/details/104563272

标签

css

css颜色

html语言

css样式

CSS基础知识总结

文章目录

CSS概述

HTML中引入CSS样式的三种方式

内联定义方式

样式块方式

引入外部独立的css文件

列表样式

CSS样式的绝对定位