CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)

于 2021-12-16 18:12:30 发布
阅读量612 收藏 1
点赞数
分类专栏： html5+css3 文章标签： css css3 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45585640/article/details/121980774
版权

CSS3基础

1. 基础认知

1.1 CSS 简介

CSS 的使用场景是什么？
  • 美化网页，布局页面
CSS 的中文名称是什么？
  • 层叠/级联样式表（Cascading Style Sheets）
  • CSS 也是一种标记语言
CSS 能设置哪些样式？
  • 文本内容：字体、大小、对齐方式
  • 图片：宽高、边框、边距
  • 版面的布局
    结构与样式分离：HTML 专注做结构 + CSS 专注做样式

1.2 体验 CSS 语法规范

CSS 规则包含哪两个部分，作用是什么？
  • 选择器：改谁的样式
  • 样式声明：改成什么样式
CSS 通常写在 HTML 的什么位置？
    <head>
      <meta charset="UTF-8" />
      <title>体验CSS语法规范</title>
      <style>
        CSS 写在这里
      </style>
    </head>
CSS 语法格式是什么？
选择器 {
  属性: 值;
  属性: 值;
}

 p {
   width: 100px;
   height: 100px;
   }
  • 使用 {} 包含一个或多个样式声明；
  • 每条样式声明以键值对形式出现：属性: 值；
  • 属性和值之间使用 : 分隔；
  • 属性之间使用 ; 分隔，最后一行的分号可以省略。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1. 体验CSS语法规范</title>
    <style>
        p {
            color: aqua;
            font-size: 64px;
        }
    </style>
</head>
<body>
    <p>学习如逆水行舟，不进则退</p>
</body>
</html>

注意：

  1. 在 HTML 中写样式不要忘记加 style 标签
  2. 设置字体不要忘记 px，提示可以把字体设置大一些，这样更直观。

1.3 CSS 代码风格

紧凑格式和展开格式哪种更推荐？为什么？
  • 更推荐展开格式，因为更直观，更易于阅读和维护。

有专门的工具对 CSS 进行压缩

  • 开发时展开给人看，更友好
  • 上线时压缩给浏览器看，更高效
书写样式时，应该使用大写字母还是小写字母？
  • 小写字母。
书写样式时，有两个地方需要注意空格，分别是什么位置？
  1. 选择器和开始花括号之间保留一个空格；
  2. : 后面保留一个空格。

2. 选择器

2.1 CSS 选择器的作用

选择器的作用是什么？
  • 选择标签(根据不同的需求，把对应的标签选择出来)。

2.2 标签选择器

选择器分为哪两大类？特征是什么？
  1. 基础选择器：由单个选择器组成
  2. 复合选择器：由多个选择器组成
标签选择器是以什么作为选择器？
  • 标签选择器就是使用 HTML 标签名称作为选择器
使用标签选择器修改样式的结果是什么？有什么优点？有什么缺点？
  • 结果：把某一类标签选择出来，统一修改样式
  • 优点：快速、统一设置同类型标签的样式
  • 缺点：没有差异化

2.3 类选择器

类选择器的应用场景是什么？
  • 如果想差异化选择不同的标签，单独选择一个或某几个标签
类选择器的语法是什么？使用步骤是什么？注意事项是什么？
  1. 定义类选择器
  • 选择器名称前有一个 . 表示是类选择器
  • {} 中仍然是一个或多个键值对；
  1. 使用类选择器
  • 找到需要修改样式的标签；
  • 给标签增加 class 属性，属性值是选择器的类名
  1. 注意事项
  • 使用类选择器不需要 .
类选择器可以应用到不同类型的标签吗？
  • 可以
给类选择器命名有注意事项？
  • . 紧跟类名，不能有空格；
  • 长名称或词组使用 - 连接，例如：jd-nav；
  • 尽量用英文，不要用数字或中文；
  • 命名要做到见名知意；
    类选择器口诀
  1. 样式点定义
  2. 结构类调用
  3. 一个或多个
  4. 开发最常用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3. 类选择器</title>
    <style>
        .hot {
            color: rgb(255, 0, 0);
            font-size: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li>HTML 入门到精通</li>
        <li class="hot">CSS 布局指南</li>
        <li>JavaScript 从入门到放弃</li>
    </ul>
</body>
</html>

2.4 使用类选择器画盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4. 使用类选择器画盒子</title>
    <style>
        .red {
            color: rgb(255, 255, 255);
            font-size: 20px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .green {
            color: rgb(247, 247, 247);
            font-size: 30px;
            height: 100px;
            width: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">red</div>
    <div class="green">green</div>
    <div class="red">red</div>
</body>
</html>

2.5 类选择器特殊使用-多类名

多类名的使用方式是什么？
  • 在标签的 class 属性中使用多个类名
  • 类名之间使用空格分隔
多类名的应用场景是什么？
  • 把元素相同的样式放在同一个公共类中，个性的样式放在单独的类中，既可以节省 CSS 代码，又方便统一修改。

2.6 id 选择器

id 选择器的前缀是什么？
  • #
id 选择器的应用场景是什么？
  • 专门定义 HTML 中某个特定元素的样式，因为 id 是唯一的
id 选择器的使用步骤？

  1. 定义带 id 的 HTML 元素

    1. 给 HTML 中的某个特殊元素增加 id 属性

  2. 定义 id 选择器

    1. 选择器名称前有一个 # 表示是 id 选择器
    2. 选择器名称就是对应 HTML 元素的 id 名称
    3. {} 中仍然是一个或多个键值对；
id 选择器和类选择器的区别？

  1. id 可以看成是身份证号（唯一） / 类可以看成是名字（可多人使用）

  2. id 只为特定元素设置样式，常与 JavaScript 联用

  3. 类选择器在修改样式中用的最多
    id 选择器口诀

  4. 样式 # 定义

  5. 结构 id 调用

  6. 只能用一次

  7. 别人勿使用

2.7 通配符选择器

通配符选择器使用什么符号定义？
  • *
  • 表示选取页面中的所有元素
通配符选择器需要调用吗？为什么？
  • 不需要
  • 浏览器在解释 HTML 时，会把通配符选择器中定义的样式应用到页面中的每一个元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6. 通配符选择器</title>
    <style>
        * {
            color: hotpink;
        }
    </style>
</head>
<body>
    <div>不要皱眉，即使在伤心的时刻，因为你从不知道有谁会醉心于你的笑容。</div>
    <p>我们看错了这个世界，却说世界欺骗了我们。</p>
    <span>我们人这一辈子不是别人的楷模，就是别人的借鉴</span>
</body>
</html>
基础选择器总结
基础选择器作用特点使用频率
标签选择器选出相同标签不能差异化选择较多
类选择器(.)按需选择标签根据需求选择非常多
id 选择器(#)选中唯一标签针对唯一标签通常与 JavaScript 联用
通配符选择器(*)选中所有标签选择的太多，有部分不需要特殊情况使用

3. 字体属性

3.1 font-family 设置字体系列

字体属性可以定义哪些样式？
  • 字体相关的样式，例如：字体系列、大小、粗细、文字样式（斜体）等
font-family 的含义是什么？
  • 字体系列、字体族
为什么要尽量使用系统默认自带字体？
  • 保证在任何用户的浏览中都能正确显示
浏览器对字体的搜索顺序是什么？
  • 当指定的字体找不到（或者某些文字不支持这个字体）时，就接着往后找
为什么要把字体样式设置给 body 标签？
  • 一次设置，到处使用
font-family 设置字体系列扩展 —— 字体族
  • 衬线字体 serif，如：宋体，Times New Roman
  • 非衬线字体 sans-serif，如：微软雅黑，苹方，Arial
  • 等宽字体 monospace，如：Courier，Courier New，Monospace，新宋体，幼圆
  • 手写体 cursive
  • 花体 fantasy
    注意：
  • 写 CSS 代码时，末尾的字体族不需要带引号；
  • Windows 推荐使用微软雅黑字体；
  • macOS 推荐使用苹方字体。
  • 衬线体如今已经很少使用了，而非衬线体更符合现代审美。如果你发现一名设计师，在做海报设计、或者制图的时候，使用了宋体，说明她一定是个外行。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7. font-family字体属性</title>
    <style>
        h2 {
            font-family: cursive;
            text-align: center;
        }
        p {
            font-family: cursive;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>《送孟浩然之广陵》</h2>
    <p>故人西辞黄鹤楼,</p>
    <p>烟花三月下扬州.</p>
    <p>孤帆远影碧空尽,</p>
    <p>唯见长江天际流.</p>
</body>
</html>

3.2 font-size 字号大小

设置字体大小的单位是什么？
  • px 像素
谷歌浏览器的默认文字大小是多少？
  • 16px
为什么要在 body 标签中指定页面文字的大小？
  • 不同浏览器可能默认显示的文字大小不一致
  • 开发时要尽量给一个明确的值，不要使用默认大小
font-size 字号大小扩展 —— 检查文字大小
  1. 确认谷歌浏览器的默认文字大小

image.png
2. 设置尺寸漏写 px

image.png

3.3 font-weight 字体粗细

实际开发中推荐使用哪种方式设置字体的粗细？
  • 数字
  • font-weight 字重
使用数值设置字体粗细需要单位吗？
  • 不需要
哪些数值可以设置字体的粗细？normal 对应多少？bold 对应多少？
  • 取值范围 100 ~ 900（按 100 递增）
  • normal：正常粗细，与 400 等值。
  • bold：加粗，与 700 等值。
    注意：不是所有的字体都提供了九种粗细的，因此有些数值指定后会看不出变化
   h2 {
        font-weight: 700;
    }
    p {
        font-weight: 400;
    }
</style>

3.4 font-style 字体样式

开发时把字体设置为倾斜的场景多吗？为什么？
  • 不多
  • font-style: italic;
font-style 的应用场景是什么？
  • 把 em、i 默认的斜体改为不倾斜显示 font-style: normal;
    注意：开发时，如果需要对段落中的局部文字进行修饰，例如搜索结果高亮，可以首选 em 标签，然后应用 font-style 首先将字体设置为不倾斜。
  <style>
        h2 {
            font-style: italic;
        }
        em {
            font-style: normal;
        }
   </style>

3.5 font 复合属性写法

字体复合属性的属性名是什么？
  • font
复合属性的作用是什么？
  • 节约代码
复合属性的编写顺序是什么？能够随意调整顺序吗？
  • font: font-style font-weight font-size/line-height font-family;
  • 复合属性不能随意调整顺序
  • 复合属性至少要保留：font-size 和 font-family 属性，否则设置无效
猜一猜在开发中字体的复合属性使用频率高吗？为什么？
  • 不高
  • font-family 通常会在 body 的标签选择器中定义，其他位置通常不需要更改字体
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11. font 复合属性写法</title>
    <style>
        #name {
            font-style: italic;
            font-weight: 900;
            font-size: 20px;
            font-family: sans-serif;
        }
        .name_a {
            font: normal 100 30px "微软雅黑";
        }
    </style>
</head>
<body>
    <div id="name">三十三世十里桃花</div> 
    <div class="name_a">一心一意百行代码</div>
</body>
</html>

3.6 字体属性总结

属性含义注意事项
font-size字号但是通常是 px（像素），一定要有单位
font-family字体工作中按照团队约定即可
font-weight字重700 加粗 / 400 普通 不带单位
font-style字体样式italic 斜体 / normal 正常，把 em 改成不倾斜
font连写font-style ,font-weight ,font-size/line-height ,font-family

4. 文本属性

4.1 文本颜色 color

文本属性可以定义哪些样式？
  • 文本相关的样式，例如：颜色、对齐方式、装饰文本、文本缩进、行间距等
文本相关的样式，例如：颜色、对齐方式、装饰文本、文本缩进、行间距等
  • 预定义的颜色名：red、green、blue
  • 十六进制：#ff0000
  • RGB 代码：rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)
有几种定义颜色的方式？在开发中哪种颜色最常用？

  • 开发中最常用的是：十六进制的颜色

  • 如果要使用透明色，可以使用 rgba(red, green, blue, 透明度)，其中：

    • red：0 ~ 255
    • green：0 ~ 255
    • blue：0 ~ 255
    • 透明度：0 ~ 1，0 表示完全透明（看不见），1 表示完全不透明

4.2 文本对齐 text-align

text-align 能设置哪个方向上的文本对齐方式？
  • 可以设置水平方向上的对齐方式
有哪三种种文本对齐方式？
  • left：左对齐（默认）
  • right：右对齐
  • center：居中
   <style>
        p1 {
            text-align: left;
        }
        p2 {
            text-align: center;
        }
        p3 {
            text-align: right;
        }
    </style>
文本对齐的本质是什么？
  • 盒子让内部的文本按照盒子边界对齐

4.3 文本装饰 text-decoration

视频中 text-decoration 能够给文本增加哪些装饰？
属性值描述
none默认，没有装饰线，最常用
underline下划线，常用
line-through删除线，不常用
overline上划线，几乎不用
问题 2：如何取消 a 标签默认的下划线？
  • text-decoration: none;
a {
     text-decoration: none;
  }

4.4 文本缩进 text-indent

text-indent 的作用是什么？
  • 设置文本段落的首行缩进，更适合中文阅读习惯
em 有多大？
  • 当前元素 1 个文字的大小
  • 1em = 16px
p {
   text-indent: 2em;
  }

4.5 行间距 line-height

line-height 的作用是什么？
  • 控制文本行与行之间的距离
  • 文本在盒子中垂直居中
行间距由几个部分组成？分别是什么？
  • 上间距
  • 文本高度
  • 下间距
应该如何测量行间距？为什么？
  • 从一段文字的下边线测量到相邻行的上间距
  • 因为文本的上下间距是相等的
    <style>
        p {
            line-height: 80px;
            color: lightgreen;
        }
    </style>

4.6 CSS 文本属性总结

属性含义注意事项
color颜色#fff / rgba(r, g, b, 透明度)
text-align对齐left / right / center
text-indent首行缩进text-indent: 2em;
text-decoration文本修饰text-decoration: underline; / text-decoration: none;
line-height行高行高等于盒子高度会垂直居中

5. CSS 的三种引入方式

5.1 内部样式表

按照书写方式，CSS 可以分成几种方式？分别是什么？
  • 行内样式表（行内式）
  • 内部样式表（嵌入式）
  • 外部样式表（链接式）
内部样式表可以放在 HTML 的什么位置？推荐会放在哪里？
  • 理论上可以放在 HTML 的任何位置
  • 推荐放在 head 标签中，不要忘记还有一个 style 标签

5.2 行内样式表

行内样式表有什么特点？
  • 写在元素的 style 属性中
  • 适合于简单、快速、临时修改样式
  • 在 style 属性中，使用键值对设置样式，不需要 {}
  • 写在哪个元素就控制哪个元素，对其他元素没有效果
    <style>
        p {
            color: lightcoral;
        }
    </style>
开发时推荐使用行内样式吗？为什么？
  • 不推荐
  • 书写繁琐，没有体现出结构和样式分离
  • 不能做到样式复用
<p style="color: lawngreen;">15. 行内样式表</p>
开发时什么时候会使用行内样式？
  • 临时使用，非正式页面

5.3 外部样式表

在实际开发中，哪种样式表的引入方式使用的多？
  • 外部样式表
  • 核心思想：CSS 与 HTML 分离
外部样式表的使用步骤是什么？
  1. 新建外部的 CSS 文件并编写样式
  2. 在 HTML 中使用 link 标签引入外部样式表
外部样式表中需要使用 style 标签吗？为什么？
  • 不需要
  • 标签是 HTML 的，CSS 中只有样式
    HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>16. 外部样式表</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
    <p>16. 外部样式表</p>
</body>
</html>

style.css文件

p {
    color: aqua;
}

5.4 CSS 引入方式总结

样式表优点缺点使用频率控制范围
行内书写方便，权重高结构样式混合低控制一个标签
内部部分结构和样式分离没有彻底分离较多控制一个页面
外部完全结构和样式分离需要 link 引入多可以被多处复用

附录

类命名规则

功能建议命名
头header
内容content / container
尾footer
导航nav
侧栏sidebar
栏目column
页面外围控制整体布局宽度wrapper
左右中left right center
登录条loginbar
标志logo
广告banner
页面主体main
热点hot
新闻news
下载download
子导航subnav
菜单menu
子菜单submenu
搜索search
友情链接friendlink
页脚footer
版权copyright
滚动scroll
内容content
标签页tab
文章列表list
提示信息msg
小技巧tips
栏目标题title
加入joinus
指南guild
服务service
注册regsiter
状态status
投票vote
合作伙伴partner
魔术师ID
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 选择器 属性选择器介绍
12-13
从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3的属性选择器主要包括以下几种： E[attr]：只使用属性名，但没有确定任何属性值； E[attr="value"]：指定属性名，并指定了该属性的属性值； E[attr~="value"]...
css3文本与字体属性
weixin_50795415的博客
02-06 571
常用文本样式属性 color属性 可以设置文本内容的前景色；主要用英语单词、十六进制、rgb()、rgba()来表示 十六进制： /* 白色 */ color: #fff; /* 黑色 */ color: #000; /* 常见灰色 */ color: #ccc; color: #333; color: #2f2f2f; rgba(): rgba(255 , 0 , 0 , .65) ，最后一个参数表示透明度，介于0~1之间，0为纯透明，1为纯实心 font-size属性 设置字号，单位：p
web前端开发培训培训，CSS如何清除默认样式
m0_60305422的博客
07-23 180
Stopwatch 解释为计时器，又称秒表、停表，很明显它是记录时间的。 如何使用 Stopwatch stopwatch = Stopwatch.createStarted(); doSomething(); stopwatch.stop(); // optional long millis = stopwatch.elapsed(MILLISECONDS); // formatted string like "12.3 ms"} log.info("time: " + stopwatc
css设置<div>文字间距,div字间距-div内文字之间间距设置方法
weixin_28840143的博客
08-03 5642
div内字与字间距是否可以用CSS代码实现？答案：可以使用css实现div字间距布局。CSS字间距的单词代码：letter-spacing1、语法：letter-spacing:3px —— 设置对象字间距为3px间隔。2、对所有div设置统一字间距div{letter-spacing:2px}这样即设置HTML中所有div标签内字与字之间都统一为2px间距离。3、针对指定div 字间距的设置.z...
多值属性、复合属性等概念
热门推荐
OrdinaryMatthew的博客
04-24 2万+
多值属性、符合属性等概念 1).简单属性：不能再划分为更小部分的属性。 2).复合属性：可以再划分为更小的部分，也就是能再划分为一些其他属性的属性。 比如说：name属性可被设计为一个包括first_name,middle_name,lase_name的复合属性。 3).单值属性：数据库中，所定义的属性对于一个特定的实体都只有一个单独的值。 比如说：对于某个特定的贷款loan实体而言，loan_n...
div内上下左右距离_div+css中如何控制字的上下间距？
weixin_39955732的博客
12-31 1974
慕工程0101907css字体上下间距，即控制两行文字垂直距离的。在CSS中，line-height被用来控制行与行之间垂直距离。不过，行间距与半行间距，还是取决于CSS中的line-height。默认状态，浏览器使用1.0-1.2line-height, 这是一个初始值。可以定义line-height属性来覆盖初始值：p｛line-height:140%｝可以有5种方式来定义line-heig...
详解CSS3中属性选择器新增加的特性
09-24
CSS3的诸多革命性改进中,对属性选择器的增强绝对是亮点之一,这里我们就来详解CSS3中属性选择器新增加的特性,需要的朋友可以参考下
CSS属性选择器的四种格式
12-11
属性选择器（AttributeSelectors），或许你不应该对属性选择器感到陌生，从本质上说，id跟类选择器其实就是属性选择器，只不过是选择了id或者类的值（value）而已。　属性选择器的格式是元素后跟中括号，中括号内带...
css复杂选择器及css字体样式、颜色属性详解
12-28
之前学习了css的一些基础选择器，然而今天要介绍css的复杂选择器，复杂选择器一共有三种 1.父子（派生）选择器 234 <em>123 此时要使234有颜色，需要用到父子<em>选择器，虽说用之前的标签选择器可以让它有...
CSS基础1-基础选择器+字体文本相关样式
12-05
CSS基础-基础选择器+字体文本相关样式
33种CSS导航样式源代码
03-28
33种CSS导航样式源代码,33种CSS导航样式源代码33种CSS导航样式源代码33种CSS导航样式源代码
css样式表分类 ，选择器，尺寸属性，边框阴影
wangzhi0918的博客
12-09 356
1，什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 2，样式表分类 样式通常存储在样式表中 样式表又分为 外部样式表(External style sheet) 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部： 内部样...
html 勾选框大小,HTML5 教程之CSS3 框大小
weixin_39590453的博客
06-03 534
CSS3 框大小CSS3box-sizing属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。属性box-sizing10.04.0-webkit-8.029.02.0-moz-5.13.1-web...
Css3之基础-3 Css 尺寸单位、尺寸属性与边框属性
weixin_33859231的博客
03-21 198
一、CSS 单位尺寸单位 - % : 百分比 - in : 英寸 - cm : 厘米 - mm : 毫米 - pt : 磅(1pt等于1/72英寸) - px: 像素(计算机屏幕上的一个点) - em : 1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍颜色单位 - rgb(x,x,x) : RGB 值，如 rgb(255,0,0) - rgb...
web前端学习（二十一）——CSS3分组和嵌套选择器、尺寸属性（height、width）的相关设置
胜天半子祁同伟
02-01 8587
web前端学习（二十一）——CSS3分组和嵌套选择器、尺寸属性（height、width）的相关设置
css3选择器，背景，边框属性
qq_28835447的博客
07-05 288
css3动画实现效果，推荐大神博客 https://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-36.html **css3注意：**兼容性问题， prefix（前缀） 浏览器（browser） -webkit- Chrome & Safari ...
CSS3 选择器——属性选择器
weixin_30887919的博客
11-01 650
上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。 从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3...
css_属性选择器（根据属性名或属性值设定指定样式）
qq_39181017的博客
06-23 7948
1.[属性名] 选择含有指定属性的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
CSS3中的box-sizing属性设置框大小
qq_36485978的博客
02-15 2623
CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。 不使用 CSS3 box-sizing 属性 默认情况下，元素的宽度与高度计算方式如下： width(宽) + padding(内边距) + border(边框) = 元素实际宽度 height(高) + padding(内边距) + border...
css3选择器-属性选择器
最新发布
04-20
CSS3选择器-属性选择器是一种用于选择具有特定属性或属性值的HTML元素的CSS选择器。它可以根据元素的属性来选择元素，从而实现对元素的样式控制。 CSS3属性选择器有以下几种类型： 1. [attribute]：选择具有指定属性的元素。例如，`[class]`可以选择所有具有class属性的元素。 2. [attribute=value]：选择具有指定属性和属性值的元素。例如，`[class="example"]`可以选择class属性值为"example"的元素。 3. [attribute~=value]：选择具有指定属性且属性值中包含指定值的元素。例如，`[class~="example"]`可以选择class属性值中包含单词"example"的元素。 4. [attribute|=value]：选择具有指定属性且属性值以指定值开头的元素。例如，`[lang|="en"]`可以选择lang属性值以"en"开头的元素。 5. [attribute^=value]：选择具有指定属性且属性值以指定值开头的元素。例如，`[href^="https://"]`可以选择href属性值以"https://"开头的元素。 6. [attribute$=value]：选择具有指定属性且属性值以指定值结尾的元素。例如，`[src$=".png"]`可以选择src属性值以".png"结尾的元素。 7. [attribute*=value]：选择具有指定属性且属性值包含指定值的元素。例如，`[title*="example"]`可以选择title属性值中包含"example"的元素。 以上就是CSS3选择器-属性选择器的介绍。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值