Web前端开发-CSS基础

最新推荐文章于 2021-03-22 09:53:22 发布

viewerlin

最新推荐文章于 2021-03-22 09:53:22 发布

阅读量250

点赞数

分类专栏： HTML/CSS 文章标签： HTML CSS JavaScript

本文链接：https://blog.csdn.net/viewerlin/article/details/80013779

版权

HTML/CSS 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

Web前端开发，自学笔记整理

CSS基础

1.样式表
01-样式表.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>样式表</title>

        <!--样式表-->
        <style>
        /*CSS的注释方式*/    
        /*书写样式中，空格、换行都不会影响代码*/
        /*div {
            width: 100px;
            height: 100px;
            background: red;
        }*/

        /*导入外部样式表（方式一）*/
        /*@import url("01-style.css");*/

        </style>

        <!--导入外部样式表（方式二）
            方式二要写在<style></style>外边
        -->
        <link rel="stylesheet" href="01-style.css" />

    </head>
    <body>
        <!--
            内联样式表、内部样式表、外部样式表
        -->

        <!--1.内联样式表-->
        <!--<div style="width: 100px; height: 100px; background: red;"></div>-->

        <!--2.内部样式表-->
        <!--<div></div>-->

        <!--3.外部样式表
            方式一：@import 由CSS提供的一种方式 只能导入CSS
            方式二：<link /> 可以加载导入CSS 还可以导入其他的属性
          ->加载的顺序不一样
            @import 先导入HTML页面再导入CSS页面
            <link /> 与页面同时导入
          ->兼容性
            @import 是CSS2.1版本提出的 有些老浏览器不支持 IE5以上
            <link /> 没有兼容性问题
          ->DOM操作（JavaScript）
            只能用<link />操作
        -->

        <div></div>
    </body>
</html>

01-style.css

div {
    width: 100px;
    height: 100px;
    background: red;
}

2.选择符
02-选择符.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择符</title>
        <style type="text/css">
            /*1.类型选择符
                语法：
                    元素 {} 
            */

            /*所有的p标签样式*/
            /*p {
                color:red
            }

            h1 {
                color: red;
            }*/

            /*2.类别选择符（class选择器）可以重复*/
            .red {
                color: red;
            }
            .blue {
                color: blue;
            }

            /*3.ID选择符（ID选择器）不可以重复
                语法： 
                    #ID名字 {}
            */
            #view1 {
                width: 100px;
                height: 100px;
                background: red;
            }
            #view2 {
                width: 100px;
                height: 100px;
                background: blue;
            }

            /*4.包含选择符（后代选择符）*/
            .title {
                color: white;
            }
            .test1 .title {
                background: red;
            }
            .test2 .title {
                background: blue;
            }

            /*5.伪类选择符（一定要严格按照顺序由上往下写）*/
            /*未链接状态*/
            a:link {
                color: blue;
            }
            /*已链接状态*/
            a:visited {
                color: gray;
            }
            /*鼠标移入状态*/
            a:hover{
                color: yellowgreen;
            }
            /*鼠标按下不松手的状态*/
            a:active {
                color:red;
            }

            /*6.通配符 通配所有的元素*/
            * {
                /*一般用于重置样式*/
            }
        </style>
    </head>
    <body>
        <p>Hello</p>
        <p>World</p>
        <!--红色-->
        <h1 class="red">HTML基础</h1>

        <!--蓝色-->
        <h1 class="blue">CSS基础</h1>
        <h1 class="blue">JavaScript基础</h1>

        <!--红色-->
        <div id="view1"></div>
        <!--蓝色-->
        <div id="view2"></div>
        <br />


        <div class="test1">
            <!--背景红色，字体白色-->
            <h3 class="title">HTML基础</h3>
            <p>超文本标记语言</p>
        </div>
        <br />
        <div class="test2">
            <!--背景蓝色，字体白色-->
            <h3 class="title">CSS基础</h3>
            <p>层叠样式表</p>
        </div>

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

3.权重
03-权重.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>权重</title>
        <style type="text/css">
            /*
              样式加不上去（样式无效）：
                1.语法错误
                2.选择元素错误
                3.权重不够           
              权重规则：
                 标签权重1，class权重10，id权重100
                 权重表达方式：0000
                 类型选择符：0001
                 class选择符：0010
                 id选择符：0100
                 伪类选择符：0010
                 包含选择符：权重之和

              内联样式：1000
              继承样式：0000  
            */
            div {
                width: 100px;
                height: 100px;
                background: red;
            }
            .test1 {
                background: blue;
            }
            #head {
                background: green;
            }

            /*class权重：0010*/
            .title {
                color: white;
            }
            /*包含选择符：0010 + 0010 = 0020*/
            .test2 .title {
                color: yellow;
            }
            /*包含选择符：0001 + 0010 = 0011*/
            div .title {
                color: green;
            }
        </style>
    </head>
    <body>
        <!--权重问题-->
        <div class="test1" id="head"></div>
        <div class="test2">
            <!--内联样式：1000 权重最高-->
            <p class="title" style="color: black;">HTML</p>
        </div>
    </body>
</html>

viewerlin

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发-CSS基础

Web前端开发，自学笔记整理CSS基础1.样式表 01-样式表.html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;样式表&lt;/title&gt; &lt;!--样
复制链接

扫一扫

专栏目录