day03 引入css

最新推荐文章于 2024-06-11 12:45:42 发布

GT.Lee

最新推荐文章于 2024-06-11 12:45:42 发布

阅读量181

点赞数

分类专栏：日志文章标签： IT

本文链接：https://blog.csdn.net/LGT970116/article/details/82719939

版权

日志专栏收录该内容

40 篇文章 0 订阅

订阅专栏

day03
前两天已经学习了html的一些常用标签，当能够搭建初步的结构，就该进入css”装修”环节了。

CSS:Cascading Style Sheets层叠样式表

引入css：
1、行间样式

    <div style="width:100px;height:100px;background-color:red">
    </div>

2、页面级

    <head>
        <style type="text/css">
            div{
                width:100px;
                height: 100px;
                background-color: green;}
        </style> 
    </head>
    <body>
        <div></div> 
    </body>

3、外部css文件

    <head>
        <link rel="stylesheet" type="text/css" href="***.css"> 
    </head>
    <body>   
        <div></div>
    </body>

最常用的方式为引入外部css文件

选择器：
1、id(1V1)
html

<div id="only">123</div>

css

#only{
    width:100px;
    height:100px;
    background-color: red;
    border-radius:80%;
}

2、class(多v多)
html

<div class="demo demo1">789</div>
<div class="demo">101</div>

css

.demo{
    background-color:#f40;
}
.demo1{
    color:yellow;
}

3、标签选择器

4、通配符

*{}

5、属性选择器
html

<div id="only"class="demo" >
        123
 </div>

css

[id="only"]{
    background-color: #f40;
    font-weight:bold;
}
.demo{
    background-color:green;}

6、父子选择器/派生选择器
html

<div>
        <strong class="nice">
            <em class="good">
                456
            </em>
        </strong>
</div>

css

div strong em{
    background-color: green;
}

.nice .good{
    background-color: pink;
}

7、直接子元素选择器
html

 <div>
        <em>1</em>
        <strong>
            <em>2</em>
        </strong>
 </div>

css

div > em{
    background-color: black;
}

8、并列选择器

html

<div class="demo">2</div>

css

div.demo{
    background-color: green;
}

9、分组选择器

html

    <em>1</em>
    <strong>2</strong>
    <span>3</span>

css

em, strong, span{
    background-color: maroon;
}

优先级
(！important > 行间样式 > id > class|属性（后面属性覆盖） > 标签 > 通配符)
小知识点：
计算机读取多级标签时，是从右到左读取的。
我们浏览网页时，是从服务器上边下载html与css文件包边在浏览器上运行，且是异步执行。计算机语言里异步是指同时，同步指的是有前后顺序。

                                              2018.9.15

GT.Lee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
day03 引入css

day03 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;前两天已经学习了html的一些常用标签，当能够搭建初步的结构，就该进入css”装修”环节了。CSS:Cascading Style Sheets层叠样式表引入css： 1、行间样式 &lt;div style="width:100px;height:100px;backgrou...
复制链接

扫一扫