CSS2基础——CSS常用属性

Neo_Arsaka
181 阅读9分钟

1. 像素

  • 概念：显示器都是由一个一个“小点”组成的，每个“小点”就是一个像素（px）
  • 规律：像素点越小，呈现的内容就越清晰、越细腻

注意：如果电脑设置中开启了缩放，那么就会影响一些工具的测量结果，但这无所谓，因为我们工作中都是参考详细的设计稿去给元素设置宽高

2. 颜色

2.1 表示方式一：颜色名

2.2 表达方式二：rgb 或 rgba

  • 编写方式：使用红、黄、蓝进行组合，其中 rgba 中的 a 表示透明度
  • 举例： 
    color: rgb(255 ,0 ,0); // 红色
color: rgba(255, 0, 0, 0.5); // 半透明的红色
  • 规律：
    • 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅
    • rgb(0, 0, 0) 是黑色，rgb(255, 255, 255) 是白色

2.3 表示方式三：HEX 或 HEXA

  • 编写方式：HEX 的原理与 rgb 一样，依然是通过：红、绿、蓝进行组合，只不过要用 6 位（分 3 组）来表达
  • 格式为：#rrggbb
  • 举例：color: #ff0000; // 红色
  • 注意：IE 浏览器不支持 HEXA，但支持 HEX

2.4 表示方式四：HSL 或 HSLA

  • 概念：HSL 是通过色相、饱和度和亮度来表示颜色的，格式为：hsl(色相、饱和度、亮度)
    • 色相：取值范围是 0～360，具体度数对应的颜色如下图
    • 饱和度：取值范围是 0%～100%（0%全灰，100%表示没有灰）
    • 亮度：取值 0%～100%（0% 亮度没了，所以是黑色，100% 亮度太强，所以就是白色）
  • HSLA 其实就是在 HSL 的基础上添加了透明度

3. CSS 字体属性

3.1 字体大小

  • 属性名：font-size
  • 作用：控制字体大小
  • 语法：font-size: 40px;
  • Chrome 浏览器支持的最小文字为 12px， 默认的文字大小为 16px， 并且 0px 会自动消失
  • 不同浏览器默认的字体大小不一致，所以最好给一个明确的值，不要用默认大小
  • 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了

3.2 字体族

  • 属性名：font-family
  • 作用：控制字体类型
  • 语法：font-family: "STCaiyun", "Microsoft YaHei", sans-serif;
  • 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上 serif（衬线字体）或 sans-serif（非衬线字体）
  • Windows 系统中，默认的字体就是微软雅黑

3.3 字体风格

  • 属性名：font-style
  • 作用：控制字体是否为斜体
  • 常用值：
    • normal：正常（默认值）
    • italic：斜体（使用字体自带的斜体效果）
    • oblique：斜体（强制亲些产生的斜体效果）
  • 使用斜体效果时，更推荐使用italic
  • 语法：font-style: italic;

3.4 字体粗细

  • 属性名：font-weight
  • 作用：控制字体的粗细
  • 常用值：
    • 关键词
      • light：细
      • normal：正常
      • bold：粗
      • bolder：很粗（多数字体不支持）
    • 数值：
      • 100～1000 且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精细程度）
      • 100～300 等同于 lighter， 400～500 等同于 normal，600 及以上等同于 bold
  • 语法：font-weight: bold;、font-weight: 600

3.5 字体复合写法

  • 属性名：font，可以把上述字体样式合并成一个属性
  • 作用：将上述所有字体相关的属性复合在一起编写
  • 编写规则：
    • 字体大小、字体族必须都写上
    • 字体族必须是最后一位、字体大小必须是倒数第二位
    • 各个属性间用空格隔开
  • 实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用 font-size 属性

4. CSS 文本属性

4.1 文本颜色

  • 属性名：color
  • 作用：控制文字和文本修饰（text-decoration）的颜色
  • 可选值：
    • 颜色名
    • rgb/rbga
    • HEX/HEXA
    • HSL/HSLA
  • 开发中常用的是 rgb/rgba 或 HEX/HEXA
  • 举例：color: rgb(112, 45, 78) 
    .atguigu1 {
    color: green; // 元素的文字和上划线都是绿色的
    text-decoration: overline dotted;
}

4.2 文本间距

  • 字母间距：letter-spacing
  • 单词间距：word-spacing（通过空格识别词）
  • 属性值为像素（px），正值让间距增大，负值让间距缩小

4.3 文本修饰

  • 属性名：text-decoration
  • 作用：控制文本的各种装饰线
  • 可选值：
    • none：无装饰线（常用）
    • underline：下划线（常用）
    • overline：上划线
    • line-through：删除线
  • 可搭配如下值使用：
    • dotted：虚线
    • wavy：波浪线
    • 也可以指定颜色
  • 举例：text-decoration: underline dotted red

4.4 文本缩进

  • 属性名：text-indent
  • 作用：控制文本首字母的缩进
  • 属性值：css 中的长度单位，例如 px（后面会学习其他的长度单位）
  • 举例：text-indent: 40px

4.5 文本对齐-水平

  • 属性名：text-align
  • 作用：控制文本的水平对齐方式
  • 常用值：
    • left：左对齐（默认值）
    • right：右对齐
    • center：居中对齐
  • 举例：text-align: center;

4.6 细说字体大小

  • 由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致。例如，font-size设为 40px，最终呈现的文字，可能比 40px 大，也可能比 40px 小
  • 通常情况下，文字相对字体设计狂，并不是垂直居中的，通常都是靠下一些

4.7 行高

  • 属性名：line-height
  • 作用：控制一行文字的高度
  • 可选值：
    • normal：由浏览器根据文字大小决定的一个默认值
    • 像素
    • 数字：参考自身 font-size 的倍数（常用）
    • 百分比：参考自身 font-size 的百分比
  • 注意：由于字体设计原因，文字在一行，并不是绝对垂直居中，若一行中都是文字，不会太影响观感
  • 举例：line-height: 1.5;
  • line-height 值过小（最小值是0，不能为负数）可能会产生文字重叠
  • line-height 是可以继承的，且为了能更好的呈现文字，最好写数值
  • line-height 和 height 的关系：
    • 设置了 height，那么高度就是 height 的值
    • 不设置 height 的时候，会根据 line-height 计算高度
  • 应用场景：
    • 对于多行文字，控制行与行之间的距离
    • 对于单行文字，让 height 等于 line-height，可以实现文字垂直居中（由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感）

4.8 文本对齐-垂直

  • 顶部：无需任何属性，在垂直方向上，默认就是顶部对齐
  • 居中：对于单行文字，让 height=line-height 即可。多行文字垂直居中后面用定位实现
  • 底部：对于单行文字，目前一个临时的方式，让 line-height=(height * 2) - font-size - x（x是根据字体族，动态决定的一个值），后面用定位实现

4.9 vertical-align

  • 属性名：vertical-align
  • 作用：用于指定同一行元素之间，或者表格单元格内文字的垂直对齐方式
  • 常用值：
    • baseline：使元素的基线与父元素的基线对齐（默认值）
    • top：使元素的顶部与其所在行的顶部对齐
    • middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐
    • bottom：使元素的底部与其所在行的底部对齐
  • 注意：vertical-align 不能控制块元素

5. CSS 列表属性

列表相关的属性，可以作用在 ul、ol、li 元素上

CSS 属性名功能属性值
line-style-type设置列表符号none：不显示前面的标识（很常用！）
square：实心方块
disc：圆形
decimal：数字
lower-roman：小写罗马字
upper-roman：大写罗马字
lower-alpha：小写字母
upper-alpha：大写字母
line-style-position设置列表符号的位置inside：在 li 里面；
outside：在 li 的外边
list-style-image自定义列表符号url（图片地址）
list-style复合属性没有数量、顺序的要求

6. CSS 表格属性

  1. 边框相关属性（其他元素也能用）：
CSS 属性名功能属性值
border-width边框宽度CSS 中可用的长度值
border-color边框颜色CSS 中可用的颜色值
border-style边框风格none：默认值
solid：实线
dashed：虚线
dotted：点线
double：双实现
border边框复合属性没有数量、顺序的要求

以上4个边哭那个相关的属性，其他元素也可以用。在后面的盒子模型中，也会详细讲解边框相关的知识。

  1. 表格独有的属性（只有 table 标签才能使用）：
CSS 属性名功能属性值
table-layout设置列宽度auto：自动，列宽根据内容计算（默认值）
fixed：固定列宽，平均分
border-spacing单元格间距CSS 中可用的长度值（生效的前提：单元格边框不能合并
border-collapse合并单元格边框collapse：合并
separate：不合并
empty-cells隐藏没有内容的单元格show：显示，默认
hide：隐藏（生效前提：单元格不能合并）
caption-side设置单元格标题位置top：上面（默认值）
bottom：在表格下面

以上 5 个属性，只有 table 标签才能使用

7. CSS 背景属性

CSS 属性名功能属性值
bacground-color设置背景颜色复合 CSS 中颜色规范的值，默认背景颜色是 transparent
background-image设置背景图片url（图片的地址）
backgrond-repeat设置背景重复方式repeat：重复，铺满整个元素（默认值）
repeat-x：只在水平方向重复
repeat-y：只在垂直方向重复
no-repeat：不重复
background-position设置背景图位置通过关键字设置位置（写两个值，用空格隔开）：
水平：left、center、right
垂直：top、center、bottom

通过长度指定坐标位置（以元素左上角为坐标原点设置图片的位置）：分别是 x 坐标和 y 坐标
background复合属性没有数量和顺序要求

8. CSS 鼠标属性

CSS 属性名功能属性值
cursor设置鼠标光标的样式pointer：小手
move：移动图标
text：文字选择器
crosshair：十字架
wait：小手
avatar
文章
阅读
粉丝