CSS3基础

最新推荐文章于 2024-05-31 17:42:47 发布

YD_1989

最新推荐文章于 2024-05-31 17:42:47 发布

阅读量126

点赞数

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/m0_58680865/article/details/119815719

版权

前端基础专栏收录该内容

23 篇文章 1 订阅

订阅专栏

CSS:层叠样式表语言(style样式属性)

(1)CSS层叠样式表入门

//style样式属性，font-size是样式名，20px是样式值。
//把大小和颜色两个样式层叠在一起来渲染
<body> 
   <div style="font-size:20px;color:red;">
       你好
   </div>
</body>

(2)CSS的盒子模型

说明：盒子模型是布局基础。

理解：在css看来每一个html标签都是一个看不见的盒子。

做网页的标准：div+css。因为div标签里面可以加任何标签。

目前主流页面开发：单页面开发。

盒子模型的基础样式：①内容、②内边距、③边框、④外边距

内容：“a"的内容是"b”，"b"的内容是“你好”。理解就是，谁在它的里面谁就是它的内容。

内边距：当前标签和它内容的距离，即外边div和里面div之间的距离。属性是“padding”。

边框：外边的框线

外边距：当前标签和父标签的距离。就这段代码而言，控制外边距可以通过控制"a"的内边距或者"b"的外边距。外边距属性：margin

<div id="a" style="width:200px;
               height:200px;
               border:1px solid;
               ">              
       <div id="b" style="width:100px;
                   height:100px;
                   border:1px solid;//solid:平滑的线
                   padding:10px;
                   margin:10px;">
           你好   
       </div>          
   </div>

(3)CSS样式表的分类

样式表分类理解：是根据样式【定义的位置】或【作用域】分的类。

①内联式样式表

内联式样式表：把样式定义在标签内部。通过style属性实现。

作用范围：当前标签内部。作用范围最小。

不适用情况：一个页面有很多个内容长的一样（样式相同）

<div style="color:red;">
       内联式样式表：把样式定义在标签内部。通过style属性实现。
       作用范围：当前标签内部。
</div>

②内部样式表

内部样式表：把样式定义在页面内部(标签里面)。通过【style标签】实现。

作用范围：当前页面内部。

不适用情况:多个页面

<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
//页面中的所有div项目都会变
div {
            font-size: 20px;
            color:red;
        }
</style>
</head>

<div>
       内部样式表：把样式定义在页面内部。通过style标签实现。
       作用范围：当前页面内部。
</div>

③外部样式表

外部样式表：把样式定义在页面外部。先定义css文件然后通过【link】标签导入。

作用范围：所有页面。

步骤：①新建css文件(3.css为例)

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

步骤：②通过link标签导入

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="3.css">    
</head>

(4)css选择器的分类

理解：css选择html的方式分的类

1. html选择器：用html标签给样式命名、选择对应html样式渲染（写在style标签里）

<style>
//div是标签名，也可以是其他任何标签
div {
            font-size: 20px;
            color:red;
        }
</style>

<div>
       html选择器：用html标签给样式命名、选择对应html样式渲染
</div>

2.id选择器：用（# 变量）给样式命名、选择对应id样式渲染

<style>
// # 变量(id)，会选择id等于a的标签进行渲染
#a {
            font-size: 20px;
            color:red;
        }
</style>

<p id="a">
	id选择器：用  （**#  变量**  ）给样式命名、选择对应id样式渲染
</p>

3.class选择器(类选择器)：用（.变量）给样式命名、选择对应class样式渲染

<style>
// . 变量(id),会选择class等于b的标签进行渲染
.b {
            font-size: 20px;
            color:red;
        }
</style>

<span class="b">
	class选择器(类选择器)：用（.变量）给样式命名、选择对应class样式渲染
</span>

4.组合选择器：用逗号分隔多种选择器、表示并列的关系

 <style>
        div,p {
            color: red;
        }
</style>
<div>
       组合选择器：用逗号分隔多种选择器、表示并列的关系。
</div>
   
<p>
	你好
</p>

<style>
        #a,.b {
            color: red;
        }
</style>
<div id="a">
       组合选择器：用逗号分隔多种选择器、表示并列的关系。
</div>
   
<p class="b">
	你好
</p>

5.包含选择器：用空格分隔多种选择器、表示父子的关系

<style>
//只要在div里面，就会被渲染
        div p{
            color: red;
        }
</style>
<div>
       <p>你好</p>
</div>

<style>
        #a .b{
            color: red;
        }
</style>
<div id="a">
       <p class="b">你好</p>
</div>

6.伪选择器：只是超链接样式的选择器（百度搜索）

<style>
   a:hover {
          font-size: 30px;
          color:aqua;
        } 
   a:visited {
          color: greenyellow;
        }
             
</style>
<ul>
       <li><a href="6.html">网站一</a></li>
       <li><a href="7.html">网站二</a></li>
</ul>

YD_1989

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3基础

CSS:层叠样式表语言(style样式属性)(1)CSS层叠样式表入门//style样式属性，font-size是样式名，20px是样式值。//把大小和颜色两个样式层叠在一起来渲染<body> <div style="font-size:20px;color:red;"> 你好 </div></body>(2)CSS的盒子模型说明：盒子模型是布局基础。理解：在css看来每一个html标签都是一个看不见的盒子。做网
复制链接

扫一扫