CSS

2023-12-27 08:58:09

CSS

CSS 语法

CSS 规则由两个主要的部分构成:选择器以及一条或多条声明

选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
属性和属性值以"键值对"的形式出现
属性是对指定的对象设置的样式属性,例如字体大小,文本颜色等

选择器

标签选择器

标签名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
  ...;
}

标签选择器可以把某一类标签全部选择出来,比如所有的<div>标签和所有的<span>标签

类选择器

<head>
  <style>
    .red {
      color: red;
    }
  </style>
</head>
<body>
  <div class="red">红色</div>
</body>

类选择器口诀:样式点定义,结构类调用.一个或多个,开发最常用.

类选择器-多类名

<head>
  <style>
    .red {
      color: red;
    }
    .font20 {
      font: 20px;
    }
  </style>
</head>
<body>
  <div class="red font20">多类名</div>
</body>

在标签 class 属性中写多个类名
多个类名中间必须用空格分开
这个标签就可以分别具有这些类名的样式

id 选择器

#id名 {
  属性1: 属性值1;
  ...;
}

id 选择器的口诀:样式#定义,结构 id 调用,只能调用一次,切勿被人使用

id 选择器和类选择器的区别

类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用.
id 选择器好比人的身份证号码,全中国是唯一的,不得重复.
id 选择器和类选择器最大的不同在于使用次数上.

通配符选择器

* {
  属性1: 属性值1;
  ...;
}

通配符选择器不需要调用,自动就给所有的元素使用样式

基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签,比如 p	不能差异化选择	较多	p {color: red;}
类选择器	可以选出 1 个或多个标签	可以根据需求选择	非常多	.nav {color: red;}
id 选择器	1 次只能选择 1 个标签	ID 属性只能在每个 HTML 文档中出现一次	一般和 js 搭配	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多,有部分不需要	特殊情况使用	* {color: red;}

属性

字体属性

字体系列

p {
  font-family: "微软雅黑";
}
div {
  font-family: Arial, "Microsoft Yahei";
}

各种字体之间必须使用英文状态下的逗号隔开.
一般情况下,如果有空格隔开的多个单词组成的字体,加引号
尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示.
最常见的几个字体: body {font-family: "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB";}

字体粗细

p {
  font-weight: bold;
}

属性值	描述
normal	默认值(不加粗)
bold	定义粗体(加粗)
100~900	400 等同于 normal,700 等同于 bold 注意这个数字后面不加单位

实际开发中,更提倡使用数字表示粗细

文字样式

p {
  font-style: normal;
}

属性值	作用
normal	默认值,浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式

平时很少给文字加斜体,反而要给斜体标签(em, i)改为不倾斜字体

字体复合属性

body {
  font: font-style font-weight font-size/line-height font-family;
}

使用 font 属性时,必须按照上面语法格式中的顺序书写,不能更换顺序,并且各个属性以空格隔开.
不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用.

字体属性总结

属性	表示	注意点
font-size	字号	我们通常用的单位是 px(像素),一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗是 400 或者 normal 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜是 normal 工作中最常用 normal
font	字体连写	字体连写是有顺序的不能随意换位置;字号和字体必须至少同时出现

文本属性

字体颜色

div {
  color: red;
}

表示	属性值
预定义的颜色值	red,green,blue,pink
十六进制	#FF0000 #FFC0CB
RGB 代码	rgb(255,0,0)或 rgb(100%,0%,0%)

对齐文本

div {
  text-align: center;
}

属性值	解释
left	左对齐(默认值)
right	右对齐
center	居中对齐

装饰文本

div {
  text-decoration: underline;
}

文本缩进

div {
  text-indent: 32px;
}

或

div {
  text-indent: 2em;
}

text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进
em 是一个相对单位,就是当前元素1 个文字的大小,如果当前元素没有设置大小,则会按照父元素的 1 个文字大小

行间距

p {
  line-height: 26px;
}

行间距小技巧

可以使行间距和盒子高度相等,从而使文字垂直居中

文本属性总结

属性	表示	注意点
color	文本颜色	通常用十六进制
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常用于段落首行缩进 2 字符的距离 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none
line-height	行高	控制行与行之间的距离

引入方式

内部样式表

<style>
  div {
    color: red;
    font-size: 12px;
  }
</style>

<style>标签理论上可以放在 HTML 文档的任何地方,但一般会放在文档的<head>标签中
通过这种方式,可以方便控制当前整个页面中的元素样式设置
代码结构清晰,但是并没有实现结构与样式的完全分离
内部样式表设定 CSS,通常也被称为嵌入式引入

行内样式表

<div style="color: red; font-size: 12px;">233</div>

style 其实就是标签的属性
在双引号中间,写法要符合 CSS 规范
可以控制当前的标签设置样式
使用行内样式表设定 CSS,通常也被成为行内式引入

外部样式表

<link rel="stylesheet" href="css文件路径" />

引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便,权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制多个页面

复合选择器

后代选择器

元素1 元素2 { 样式声明 }

元素 1 和元素 2 中间用空格隔开
元素 1 是父级,元素 2 是子级,最终选择的是元素 2
元素 2 可以是儿子,也可以是孙子等,只要是元素 1 的后代即可
元素 1 和元素 2 可以是任意基础选择器

子选择器

元素1 > 元素2 { 样式声明 }

元素 1 和元素 2 中间用 > 隔开
元素 1 是父级,元素 2 是子级,最终选择的是元素 2
元素 2 必须是亲儿子,其孙子,重孙之类都不归他管.也可以叫他亲儿子选择器

并集选择器

元素1,元素2 { 样式声明 }

元素 1 和元素 2 中间用 , 隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

伪类选择器

链接伪类选择器

a:link    /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover   /*选择鼠标指针位于其上的链接*/
a:active  /*选择活动链接(鼠标按下未弹起的链接)*/

注意事项

为了确保生效,请按照 LVHA 的顺序声明,即:link-visited-hover-active

focus 伪类选择器

input:focus {
  background-color: pink;
}

一般情况<input>类表单元素才能获取
谁获得光标,谁获得效果

复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住 a{}和 a:hover 实际开发的写法
:focus 选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写法

CSS 的元素显示模式

块元素

块元素的特点:

自己独占一行
高度,宽度,外边距以及内边距都可以控制
宽度默认是容器(父级宽度的 100%)
是一个容器及盒子,里面可以放行内或者块级元素.

注意:

文字类的元素内不能使用块级元素
<p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>
同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素

行内元素

行内元素的特点

相邻行内元素在一行上,一行可以显示多个
高,宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

注意:

链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全

行内块元素

例如:<img />,<input />,<td>

行内块元素特点

和相邻行内元素和行内块元素在一行上,但是他们之间会有空白缝隙.一行可以显示多个(行内元素特点)
默认宽度就是它本身内容的宽度(行内元素特点)
高度,行高,外边距以及内边距都可以控制(块级元素特点)

元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的 100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

元素显示模式转换

转换为块元素

行内元素 {
  display: block;
}

转换为行内元素

块元素 {
  display: inline;
}

转换为行内块元素

非行内块元素 {
  display: inline-block;
}

CSS 的背景

背景颜色

元素 {
  background-color: 颜色值;
}

一般情况下元素背景颜色默认值为transparent

背景图片

元素 {
  background-image: none | url(url);
}

参数值	作用
none	无背景图(默认)
url	使用绝对或相对地址指定背景图像

背景平铺

元素 {
  background-repeat: repeat | no-repeat | repeat-x | repeat-y;
}

参数值	作用
repeat	背景图像在纵向和横向上平铺(默认)
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

背景图片位置

元素 {
  background-position: x y;
}

参数代表的意思是:x 坐标和 y 坐标.可以使用方位名词或者精确单位

参数值	说明
length	百分数由浮点数字和单位标识符组成的长度值
position	top center bottom left center right 方位名词

参数是方位名词

如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 一样
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

参数是精确单位

如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中

参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标

背景图像固定

元素 {
  background-attachment: scroll | fixed;
}

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

图像属性复合写法

元素 {
  background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
}

使用简写属性时,没有特定的书写顺序,这个是一般习惯约定顺序

背景色半透明

元素 {
  background: rgba(0, 0, 0, 0.3);
}

最后一个参数是 alpha 透明度,取值范围在 0~1 之间
我们习惯把 0.3 的 0 省略掉,写为 rgba(0, 0, 0, .3);
背景半透明是指盒子背景半透明,盒子里面的内容不受影响

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB 代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-attachment	背景固定	scroll(背景滚动)/fixed(背景固定)
background-position	背景位置	length/position 分别是 x 和 y 坐标
背景简写	书写更简单	背景颜色背景图片地址背景平铺背景滚动背景位置
背景色半透明	背景颜色半透明	background: rgba(0,0,0,0.3);

码农公寓

CSS

CSS 语法

选择器

标签选择器

类选择器

类选择器-多类名

id 选择器

id 选择器和类选择器的区别

通配符选择器

基础选择器总结

属性

字体属性

字体系列

字体大小

字体粗细

文字样式

字体复合属性

字体属性总结

文本属性

字体颜色

对齐文本

装饰文本

文本缩进

行间距

行间距小技巧

文本属性总结

引入方式

内部样式表

行内样式表

外部样式表

引入方式总结

复合选择器

后代选择器

子选择器

并集选择器

伪类选择器

链接伪类选择器

注意事项

focus 伪类选择器

复合选择器总结

CSS 的元素显示模式

块元素

块元素的特点:

注意:

行内元素

行内元素的特点

注意:

行内块元素

行内块元素特点

元素显示模式总结

元素显示模式转换

转换为块元素

转换为行内元素

转换为行内块元素

CSS 的背景

背景颜色

背景图片

背景平铺

背景图片位置

参数是方位名词

参数是精确单位

参数是混合单位

背景图像固定

图像属性复合写法

背景色半透明

背景总结

相关文章