pt18CSS

于 2023-07-12 23:54:45 发布
阅读量191 收藏
点赞数
文章标签： python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60092693/article/details/131619741
版权
CSS（层叠样式表）用于网页布局与美化，可以通过行内样式、内嵌样式和外链样式表三种方式使用。文章详细介绍了各种CSS属性，如颜色、背景、字体大小等，并讲解了选择器（标签选择器、ID选择器、类选择器）、伪类选择器和优先级规则。此外，还讨论了元素的嵌套原则和尺寸单位。
摘要由CSDN通过智能技术生成

CSS 基础使用

CSS全称为： Cascading Style Sheets ，意为层叠样式表 ，与HTML相辅相成，实现网页的排版布局与样式美化

CSS使用方式

行内样式/内联样式

使用简单，但不推荐，大面积使用，很累

借助于style标签属性，为当前的元素添加样式声明，声明由CSS属性和值组成

<标签名 style="样式声明">
eg：     
<h1 style="background-color: red;color: green">  hello world </h1>

常用CSS属性（其他属性，见文章末尾）

设置文本颜色 color:red;
设置背景颜色 background-color:green;
设置字体大小 font-size:32px;

内嵌样式 style

借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式，格式：

<style>
   	选择器{
   	 	属性:值;
    		属性:值;
   	}
</style>

选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式。

外链样式表 link

创建外部样式表文件 后缀使用.css，在HTML文件中使用标签引入外部样式表，样式表文件中借助选择器匹配元素应用样式

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

使用方式举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS使用方式</title>
  <!-- 3、链接外部样式表文件 写项目时使用，更灵活  -->
  <!-- <link rel="stylesheet" href="demo.css"> -->

  <!-- 2、在HTML标签内部嵌入一段CSS代码 -->
  <style>
    /* CSS代码的注释样式 */
    h1{
      background-color: red;
      color: green;
    }
  </style>
</head>
<body>
  <!-- 1、行内样式不推荐，只能本行内使用-->
<!-- <h1 style="background-color: red;color: green">  hello world  </h1> -->
  <h1>hello world</h1>
  <h1>俺也一样</h1>
</body>
</html>

demo.css文件内容

/* 样式表  demo.css文件内容 */
h1{
  background-color: red;
  color: green;
}

样式表特征

层叠性

多组CSS样式共同作用于一个元素

继承性

后代元素可以继承祖先元素中的某些样式，大部分的文本属性都可以被继承

样式表的优先级

优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。

  • 行内样式的优先级最高
  • 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
  • 浏览器默认样式和继承样式优先级较低
<head>
  <style>
    body{
      /* 默认字体大小16px */
      font-size: 30px;
    }
    h1{
      font-size: 32px;
      background-color: aqua;
    }
  </style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
  <!-- 当CSS的书写方式一致 后执行的样式代码会覆盖先执行的样式代码 行内样式的优先级最高  浏览器默认样式和继承自祖先元素的样式优先级最低 -->
  <h1 style="text-align: center;background-color: chartreuse;">
    hello world
  </h1>

当CSS的书写方式一致 后执行的样式代码会覆盖先执行的样式代码 行内样式的优先级最高 浏览器默认样式和继承自祖先元素的样式优先级最低

在这里插入图片描述

CSS 选择器

作用：匹配文档中的某些元素为其应用样式

标签选择器

根据标签名匹配文档中所有该元素，如上面使用

标签名{
  属性:值;
}
id选择器

根据元素的 id 属性值匹配文档中惟一的元素，id具有唯一性，不能重复使用，大的布局上使用，一般尽可能不用

  #id属性值{
  
  }

注意 :
id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头;
尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示

class选择器

类选择器：根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用
语法 :

.class属性值 {
 	
}	

特殊用法 :

  1. 类选择器与其他选择器结合使用
     注意标签与类选择器结合时,标签在前,类选择器在后
       	例 : a.c1{ }
  2. class属性值可以写多个,共同应用类选择器的样式
     例 : 
        	.c1{  }
        	.c2{  }		
        	
<p class="c1 c2"></p>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>选择器-id/class</title>
  <style>
<!--  创建id选择器 -->          
    #title{
      color: red;
    }
<!--  创建class选择器 -->    
    .blue{
      color: blue;
    }

    .center{
      text-align: center;
    }
<!--  与其他选择器结合使用 作用到 全场卖五块处的li-->   
    li.blue{
      font-size: 30px;
      font-weight: bold;
    }
<!--  id=title的h1 -->   
    h1#title{}
<!--  同时具有两个class -->   
    .blue.center{}
  </style>
</head>
<body>
  <!-- 
    id     唯一   页面中id值不能重复
    class  值可以重复使用 一个元素可以有多个class值 
   -->
  <h1 id="title">选择器的使用</h1>
  <p class="blue">
    <!-- lorem*2 -->
    Lorem ipsum dolor sit amet consectetur ....
  </p>
  <!-- ul>li*4 -->
  <ul>
    <li class="center">两块钱你买不了吃亏</li>
    <li class="center">两块钱你买不了上当</li>
    <li class="center">两块钱你啥也买不了</li>
<!-- class属性可以取多个值 多个值之间用空格分隔 不区分先后顺序 只要样式不冲突都会生效 -->
    <li class="blue center">全场卖五块！</li>
  </ul>
</body> 
</html>
群组选择器

为一组元素统一设置样式
语法 :

selector1,selector2,selector3{	         
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>群组选择器</title>

  <style>
    div{
      /* width: 200px;
      height: 200px; */
      background-color: aqua;
    }
    h1{
      /* width: 200px;
      height: 200px; */
      background-color: brown;
    }
/* 群组选择器 将多个选择器通过,分隔后 形成一个群组 可以对群组中包含的元素设置统一的样式 */
/* 1.样式设置完毕后 将重复的样式放在同一个群组中 减少样式代码的重复
2.在项目开始前 清除页面中常用元素的默认样式,浏览器body里点      margin,padding,border,outline */
    div,h1{
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <!-- div#d1  + tab  -->
  <div id="d1"></div>
  <!-- h1#title.blue.center + tab-->
  <h1 id="title" class="blue center"></h1>
</body>
</html>
后代选择器

匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)，

eg：匹配selector1中所有满足selector2的后代元素

selector1 selector2{
}
子代选择器

匹配满足选择器的所有直接子元素

selector1>selector2{
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>后代、子代选择器</title>
  <style>
    .nav>li{
      background-color: #4f8dfe;
      color: white;
    }
    .section>li{
      background-color: #292d32;
      color: #999;
    }
/* 在项目中 一个页面中可能会有很多相同的页面结构 相同的页面结构要设置不同的样式时  
      可以对外层的祖先元素或者父元素添加特殊的属性如id/class
      然后通过后代选择器/子代选择器查找内部的子元素设置样式 */
    /* 子代选择器 查找直接包含的子元素 */
    /* 后代选择器 查找后代元素 包括直接包含的元素和间接包含的元素 范围较大 */
  </style>
</head>
<body>
  <!-- ul>li -->
  <ul class="nav">
    <li>首页</li>
    <li>免费课</li>
    <li>直播课</li>
  </ul>

  <ul class="section">
    <li>前端/后端开发</li>
    <li>大数据/云计算</li>
    <li>人工智能</li>
  </ul>
</body>
</html>
伪类选择器

为元素的不同状态分别设置样式,必须与基础选择器结合使用

:link 超链接访问前的状态
:visited 超链接访问后的状态
:hover 鼠标滑过时的状态，使用较多
:active 鼠标点按不抬起时的状态(激活)
:focus 焦点状态(文本框被编辑时就称为获取焦点)

使用 :

a:link{
}
a:visited{
}
.c1:hover{ }

注意 :

  1. 超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写
:link
:visited
:hover
:active
  1. 超链接常用设置 :
a{
	/*统一设置超链接默认样式(不分状态)*/
}
a:hover{
	/*鼠标滑过时改样式*/
}

伪类选择器hover

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>伪类选择器</title>
  <style>

    span{
      color: blue;
      /* 添加下划线 */
      text-decoration: underline;
      /* 鼠标指针变成小手 */
      cursor: pointer;
    }
    span:active{
      color: red;
    }

    div{
      width: 200px;
      height: 200px;
      background-color: red;
      /* 过渡  在样式发生变化时 不会马上改变 而是在规定的时间内完成变化 */
      /*  要发生变化的样式属性,所有all     过渡时间  时长，快慢，先快后慢... */
      /* transition: width 1s,background 1s; */
      transition: all 1s;
    }
    div:hover{
      width: 500px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <!-- <a href="">百度一下</a> -->
  <span>百度一下</span>
  <div></div>
</body>
</html>

选择器的优先级

使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

选择器权重
标签选择器1
(伪)类选择器10
id选择器100
行内样式1000

复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和，群组选择器权重以每个选择器单独的权重为准，不进行相加计算
例 :

/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
 color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1  */
 color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
 color:blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>选择器的优先级</title>
  <style>
    h1{
      color: blue;
    }
    #title{
      color: green;
    }
    .red{
      color: red;
    }
    /* 后代、子代、伪类选择器使用时 多个选择器的权重累加 
    伪类选择器使用时建议将原本生效的选择器拿来后再添加伪类 */
    #title:hover{
      color: pink;
    }

    /* 群组选择器中每个选择器的权重独立计算,不会累加 */
    #login,.main,h1,h2,h3,p{
      color: orange;
    }
  </style>
</head>
<body>
  <!-- 当样式发生冲突时 会先判断选择器的优先级 如果选择器优先级一致 再按照代码的执行顺序判断 -->
  <!-- h1#title.red -->
  <!-- 尽可能通过不同的选择器对页面元素进行查找 为页面元素添加不同的字体颜色 color: -->
  <h1 id="title" class="red">
    测试选择器的优先级
  </h1>
</body>
</html>

标签分类

块元素

独占一行，不与元素共行；可以手动设置宽高，默认宽度与与父元素保持一致
例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)

行内元素

可以与其他元素共行显示；不能手动设置宽高，尺寸由内容决定
例 : span label b strong i s u sub sup a

行内块元素

可以与其他元素共行显示,又能手动调整宽高
例 : img input button (表单控件)

嵌套原则

  1. 块元素中可以嵌套任意类型的元素，p元素除外,段落标签只能嵌套行内元素，不能嵌套块元素
  2. 行内元素中最好只嵌套行内或行内块元素

display设置元素显示方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>标签分类</title>
  <style>
    /* 
      display 设置元素显示方式,覆盖默认显示方式
      
      none  隐藏元素，不加载

      block 块元素 调整宽高，独占一行，默认宽度和父元素一致

      inline 行内元素 能和其他元素在同一行显示 不能调整宽高，大小由内容决定

      inline-block 行内块 能和其他元素在同一行显示 也能调整宽高 
                   设置行内块后 当前元素会被当做一行中的内容对待 在元素后做的换行会被替换成一个空格
    */
    div{
      width: 200px;
      height: 200px;
      background-color: red;
      /* 设置成行内块 */
      display: inline-block;
    }
    span{
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 将span的显示方式设置为块元素 */
      /* display: block; */
      /* display: inline-block; */
      /* 隐藏 */
      display: none;
    }
  </style>
</head>
<body>
  <div></div>
  <span></span>
  <a href="">hello world</a>

  <!-- 嵌套原则  不建议这样使用<a href="https://www.baidu.com">
    <h1>百度一下</h1>
  </a> -->

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


  <!--嵌套原则  不建议这样使用 <p>
    <h1></h1>
  </p> -->


</body>
</html>html

尺寸单位

  • px 像素单位
  • % 百分比，参照父元素对应属性的值进行计算
  • em 字体尺寸单位，参照父元素（body？）的字体大小计算，默认1em=16px
  • rem字体尺寸单位，参照根元素（html？）的字体大小计算，默认1rem=16px

颜色单位

  • 英文单词：red，green，blue
  • rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
  • rgba(r,g,b,alpha) 三原色每种取值0255，alpha取值0（透明）1（不透明）
  • 十六进制表示：以#为前缀，分为长十六进制和短十六进制。
    • 长十六进制：每两位为一组，代表一种三原色；每位的取值范围09，af
      例：red rgb(255,0,0) #ff0000
    • 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
      例：#000 #fff #f00
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>尺寸单位</title>
  <style>
    html{
      height: 100%;
    }
    body{
      /* 清除body的默认属性 */
      /* 在chrome中 会为body添加margin=8px的默认外边距 让内容不会直接贴在浏览器边缘 */
      /* 如果取值为0 不加单位 一般不对height做调整，默认无高度属性*/
      margin: 0;
      /* width: 100%; */
      height: 100%;
      font-size: 20px;
    }
    div{
      width: 50%;
      height: 50%;
      /* 
        十六进制     十进制
         f           15
         10          16
         1f        16+15
         2f        16*2+15
         ff        16*15+15       
       */
      /* background-color: rgb(0,0,0) */
       /* #f00-->#ff0000 */
      background-color:#666;
      /* 父元素body字体大小*1.5 */
      font-size: 1.5em;
    }
    p{
      width: 40em;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam et, repellendus facilis enim, hic libero ea ad magnam inventore cum deleniti ipsam adipisci unde, provident id expedita. Voluptatum, expedita sapiente.
  </div>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio, inventore voluptate consectetur aliquam accusantium in itaque quisquam voluptatum a, veritatis eaque, voluptatem cum alias. Cumque adipisci eos qui placeat facilis?
  </p>
  <div>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam sed dolorum, aperiam sapiente enim dicta magnam, dolor sint porro, earum aspernatur corrupti. Corporis dolor eos in ducimus commodi non officiis?
  </div>
</body>
</html>

常用CSS样式参考

功能属性名取值
宽度width尺寸单位，行内元素无效
高度height尺寸单位，行内元素无效
背景颜色background-color颜色单位
背景图片background-imageurl(“路径”)
字体大小font-size尺寸单位
字体粗细程度font-weightnormal/bold(加粗)
字体样式font-stylenormal/italic(倾斜)
字体名称font-family字体名称，如Arial,“黑体”
文本颜色color颜色单位
文本装饰线text-decorationnone/underline(下划线)
文本内容的水平对齐方式text-alignleft(默认值)/center/right/justify(两端对齐)
行高(文本内容垂直对齐)line-height尺寸单位,line-height = height 设置一行文本在元素中垂直居中,line-height > height 文本下移显示,line-height < height 文本靠上显示
边框border三个值，分别为宽度/样式/颜色，用空格隔开，如 1px solid red(1像素实线边框)
单边框border-top/right/bottom/left同上
圆角边框border-radius像素值或百分比，50%为圆形，最多取4个值，按照顺序分别表示左上、右上、右下、左下，如果没有值时和对角一致
内边距padding常用像素值，调整元素内容与边框之间的距离， 最多取4个值，按照顺序分别表示上右下左四个方向的距离，最小值为0
单方向内边距padding-top/right/bottom/left取一个值
外边距margin调整元素与元素之间的距离，最多取4个值，按照顺序分别表示上右下左四个方向的距离
单方向外边距margin-top/right/bottom/left取一个值
修改鼠标指针样式cursorpointer光标呈现为指示链接的指针
过渡效果transition取多个值，包含设置过渡效果的 CSS 属性的名称，完成过渡效果需要多少秒或毫秒，速度效果的速度曲线等，如width 2s linear

内容垂直对齐) | line-height|　尺寸单位,line-height = height 设置一行文本在元素中垂直居中,line-height > height 文本下移显示,line-height < height 文本靠上显示　|
| 边框 | border | 三个值，分别为宽度/样式/颜色，用空格隔开，如 1px solid red(1像素实线边框) |
| 单边框 | border-top/right/bottom/left | 同上 |
| 圆角边框 | border-radius | 像素值或百分比，50%为圆形，最多取4个值，按照顺序分别表示左上、右上、右下、左下，如果没有值时和对角一致 |
| 内边距 | padding | 常用像素值，调整元素内容与边框之间的距离， 最多取4个值，按照顺序分别表示上右下左四个方向的距离，最小值为0|
|单方向内边距|padding-top/right/bottom/left|取一个值|
|外边距|margin|调整元素与元素之间的距离，最多取4个值，按照顺序分别表示上右下左四个方向的距离|
|单方向外边距|margin-top/right/bottom/left|取一个值|
| 修改鼠标指针样式 |cursor | pointer光标呈现为指示链接的指针|
| 过渡效果 | transition | 取多个值，包含设置过渡效果的 CSS 属性的名称，完成过渡效果需要多少秒或毫秒，速度效果的速度曲线等，如width 2s linear|

daydayup9527
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值