CSS3笔记

发布于：2025-04-19 ⋅ 阅读:(24) ⋅ 点赞:(0)

文章目录

1.CSS的概念

层叠样式表:(Cascading Style Sheets,缩写CSS),是一种样式表语言,用来描述HTML文档的呈现(美化内容)
书写位置:title标签下方添加style双标签,style标签里面书写CSS代码

<title></title>
<style>
CSS代码
</style>

注意:CSS代码包括属性名:属性值,属性名和属性值要成对出现(键值对)

2.CSS的引入方式

  1. 内部样式表
  • CSS代码写在style标签里面
    ![[Pasted image 20250411132948.png]]
  1. 外部样式表
  • CSS代码写在单独的CSS文件中(.css)
  • 在HTML中使用link标签引入(link标签也写在title标签下方)
<link rel = "stylesheet" href = "./my.css">

![[Pasted image 20250411132828.png]]

rel属性是关系的意思,stylesheet表示样式表,href属性写css样式表的文件路径

  1. 行内样式
  • CSS代码写在标签的style属性值里()
<div style = "color : red;">这是div标签</div>

一般配合JavaScript使用

3.选择器

作用:查找标签,设置样式

3.1基础选择器

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

3.1.1标签选择器

使用标签名作为选择器-选中同名标签设置相同的样式
![[Pasted image 20250411134608.png]]

特点:选中同名标签设置相同的样式,无法差异化同名标签的样式

3.1.2类选择器

作用:查找标签,差异化设置标签的显示效果
使用类选择器的步骤:

  • 定义类选择器-.类名
  • 使用类选择器-标签添加`class = “类名”``
    ![[Pasted image 20250411135347.png]]

当同时使用两个类选择器时,代码的书写方式:

  .setcolor{
      color:red;
    }
 .setsize{
      font-size: 30px;
    }
    
 <div class="setcolor setsize">这是div标签</div>

注意:

  • 类名自定义,不用用纯数字或中文,尽量用英文命名
  • 一个类选择器可供多个标签使用
  • 一个标签可以使用多个类名,类名之间用空格隔开
  • 类名需要见名知意,多个单词可以用,多个单词之间可以用-连接

3.1.3id选择器

作用:查找标签,差异化设置标签的显示效果
场景:id选择器一般配合JavaScript使用,很少用来设置CSS样式
id选择器的使用步骤:

  • 定义id选择器-#id名
  • 使用id选择器-标签添加id="id名"
    ![[Pasted image 20250411140811.png]]

注意:同一个id选择器在一个页面只能使用一次

3.1.4通配符选择器

作用:查找页面所有标签,设置相同样式
通配符选择器:*,不需要调用,浏览器自动查找页面所有标签,设置相同的样式

 * {
  CSS代码
}

4.画盒子

使用合适的选择器画盒子
属性:

  1. width-宽度
  2. height-高度
  3. background-color-背景色
    ![[Pasted image 20250415083736.png]]

5.文字控制属性

5.1 字体大小-font-size

属性值:文字尺寸,PC网页端最常用的单位px,属性值必须有单位px否则不生效
注意:浏览器默认的字体大小为16px
![[Pasted image 20250415090434.png]]

5.2 字体粗细-font-weight

属性值:

  • 数字(开发使用)-正常为400,加粗为700
  • 关键字-正常为normal,加粗为bold
<title>Document</title>
  <style>
    /* 对h3去除加粗效果 */
    h3 {
      font-weight: 400;
    }
    /* 对p标签加上加粗效果 */
    p {
      font-weight: 700;
    }
  </tyle>
</head>
<body>
  <h3>h3标签</h3>
  <p>这是p标签</p>
</body>

5.3 字体倾斜-font-style

作用:清除文字默认的倾斜效果
属性值:

  • 正常(不倾斜):normal
  • 倾斜:italic

5.4 行高-line-height

作用:设置多行文本的间距
属性值:

  • 数字+px
  • 数字(当前标签font-size属性值的倍数)
    ![[Pasted image 20250415092518.png]]

行高的测量方法:从一行文字的最顶端(最低端)量到下一行文字的最顶端(最低端)

垂直居中
把行高属性值等于盒子高度属性值
只能用于单行文字
![[Pasted image 20250416191955.png]]

5.5 字体族-font-family

属性值:字体名

  • 如果属性值是多个字体名,各个字体名用逗号隔开,执行顺序是从左向右依次查找
  • font-family属性最后设置一个字体族名,网页开发建议使用无衬线字体(sans-serif)
/* 字体族,更改字体 */
div {
  font-family: 楷体;
}

![[Pasted image 20250417104220.png]]

5.6 字体复合属性-font

使用场景:设置网页文字公共样式
复合属性:属性的简写方式,应该属性对应多个值的写法,各个属性值之间用空格隔开

font:是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)

![[Pasted image 20250417111223.png]]

注意:字号和字体只必须书写,否则font属性不生效

5.7 文本缩进-text-indent

属性值:

  • 数字+px
  • 数字+em(推荐:1em = 当前标签的字号大小)

5.8文本对齐-text-align

作用:控制内容水平的对齐方式
属性值:

  • left-左对齐(默认)
  • center-居中对齐
  • right-右对齐
    给图片设置水平对齐方式
    属性要设置给内容的父级-把图片标签放到别的标签里面作为子级,给父级标签设置水平居中属性
    ![[Pasted image 20250417113048.png]]

5.9 修饰线-text-decoration

属性值:

  • none-无
  • underline-下划线
  • line-through-删除线
  • overline0上划线
    ![[Pasted image 20250417114021.png]]

5.10 颜色-color

属性值:

  • 英文单词
  • rgb(r,g,b)-r,g,b分别表示红色绿色,蓝色三原色,取值范围0~255
  • ogba(r,g,b,a)-a表示透明度,取值为0~1(0表示完全透明，数值增大,透明度降低)
  • #RRGGBB-开发使用(例:#000000,#00ff00也可以简写成#000,#0f0)

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布