CSS基础

最新推荐文章于 2023-01-24 17:05:59 发布

tnnnnt

最新推荐文章于 2023-01-24 17:05:59 发布

阅读量495

点赞数

文章标签： css 网页设计 dreamweaver

本文链接：https://blog.csdn.net/yongzhouchen/article/details/116677093

版权

CSS核心基础

CSS样式规则
- 其基本语法格式为：
```
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
```
- CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式
- 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如：
```
p{font-family:"Times New Roman";}
```

引入CSS样式表

行内式（很少使用），基本语法格式为：

<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</标记名>

内嵌式，是将CSS代码集中写在HTML文档的<head>头部标记中，并且用style标记定义，其基本语法格式为：
```
<head>
<style type="text/css">
	选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
```

链入式，基本语法格式为：

<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
//href：定义所链接外部样式表文件的URL
//type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表
//rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件

CSS基础选择器

标记选择器，是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式为：
```
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
```

类选择器，使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式为：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
//类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性
//类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符

id选择器，使用“#”进行标识，后面紧跟id名，其基本语法格式为：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
//id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应文档中某一个具体的元素
//同一个id可以应用于多个标记，浏览器并不报错，但是这种做法是不被允许的，因为JavaScript等脚本语言调用id时会出错
//id选择器不支持像类选择器那样定义多个值，类似“id="bold font22"”的写法是完全错误的

通配符选择器，用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式为：

*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
//例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
*{
	margin:0;	/*定义外边距*/
	padding:0;	/*定义内边距*/
}

CSS控制文本样式

CSS字体样式属性

font-size：字号大小

相对长度单位说明
em 相对于当前对象内文本的字体尺寸
px 像素，最常用，推荐使用
绝对长度单位 说明
in 英寸
cm 厘米
mm 毫米
pt 点
font-family：字体
- 可以同时指定多个字体，中间以逗号隔开，如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体
- 各种字体之间必须用英文状态下的逗号隔开
- 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前
- 如果字体名中包含空格、#、¥等符号，则该字体必须加英文状态下的单引号或双引号
- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

font-weight：字体粗细

值	描述
normal(常用)	默认值，定义标准的字符
bold(常用)	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900(100的整数倍)	定义由细到粗的字符，其中400等同于normal，700等同于bold，值越大字体越粗

font-variant：变体，其可用属性值如下：
- normal：默认值，浏览器会显示标准的字体
- small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小
font-style：字体风格，其可用属性值如下：
- normal：默认值，浏览器会显示标准的字体样式
- italic和oblique：斜体，两者无本质区别，但italic常用

font：综合设置字体样式，其基本语法格式为：

选择器{font:font-style font-variant font-weight font-size/line-height font-family;}
//使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中line-height指的是行高，在后面将具体介绍，例如：
p{font:italic small-caps bold 30px/40px Arial,"宋体";}
//其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

CSS文本外观属性
- color：文本颜色，其取值方式如下：
  - 预定义的颜色值，如red,green,blue等
  - 十六进制（最常用），如#FF0000，#FF6600，#29D794等
  - RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)
- letter-spacing：字间距，其属性值可为不同单位的数值，允许使用负值，默认值为normal
- word-spacing：单词间距，其属性值可为不同单位的数值，允许使用负值，默认值为normal
- line-height：行间距，常用的属性值单位有像素px、相对值em和百分比%
- text-transform：文本转换，用于转换英文字符的大小写，其可用属性值如下：
  - none：不转换（默认值）
  - capitalize：首字母大写
  - uppercase：全部字符转换为大写
  - lowercase：全部字符转换为小写
- text-decoration：文本装饰，可用属性值如下：
  - none：没有装饰（正常文本默认值）
  - underline：下划线
  - overline：上划线
  - line-through：删除线
- text-align：水平对齐方式，其可用属性值如下：
  - left：左对齐（默认值）
  - right：右对齐
  - center：居中对齐
  - 注意
    - text-align属性仅适用于块级元素，对行内元素无效
    - 如果需要对图像设置水平对齐，可以为图像添加一个父标记，如<p>或<div>，然后对父标记应用text-align属性，即可实现图像的水平对齐
- text-indent：首行缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相当于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位，text-indent属性仅适用于块级元素，对行内元素无效
- white-space：空白符处理，其属性值如下：
  - normal：常规（默认值），文本中的空格、空内无效，满行（到达区域边界）后自动换行
  - pre：预格式化，按文档的书写格式保留空格、空行原样显示
  - nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记<br />。内容超出元素边界也不换行，若超出浏览器页面则会自动增加滚动条
CSS定义背景颜色
- 使用background-color属性来设置，其属性值与文本颜色的取值一样。其默认值为transparent，即背景透明，这时子元素会显示其父元素的背景

CSS高级特性
- CSS复合选择器
  - 标签指定式选择器，又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如 h3.special或p#one
  - 后代选择器，用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。后代选择器不限于使用两个元素，如果需要加入更多的元素，只需在元素之间加上空格即可
  - 并集选择器，是各个选择器通过逗号连接而成，任何形式的选择器（包括标记选择器、class类选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为它们定义相同的CSS样式
- CSS层叠性与继承性
  - 层叠性，指多种CSS样式的叠加
  - 继承性，指书写CSS样式表时，子标记会继承父标记的某些样式。以下属性不具有继承性：边框、外边距、内边距、背景、定位、布局、元素宽高
- CSS优先级
  - 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。CSS为每一种基础选择器都分配了一个权重，其中，标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。使用不同的选择器对同一个元素设置样式，浏览器会根据选择器的优先级规则解析CSS样式。对于由多个基础选择器构成的复合选择器（并集选择器除外），其权重为这些基础选择器权重的叠加
  - 继承样式的权重为0
  - 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，它拥有比上面提到的选择器都大的优先级
  - 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大
  - CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。注意：!important命令必须位于属性值和分号之间，否则无效
  - 复合选择器的权重无论为多少个类选择器和标记选择器的叠加，其权重都不会高于id选择器