CSS

CSS

CSS 语法

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

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

选择器

标签选择器

标签名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
  ...;
}
  • 标签选择器可以把某一类标签全部选择出来,比如所有的
    标签和所有的标签

类选择器


  


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

类选择器-多类名


  


  
多类名
  • 在标签 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-size: 20px;
}
  • px(像素)大小是网页的最常用的单位
  • 谷歌默认字号大小为 16px;
  • 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确指大小,不要默认大小
  • 可以给 body 指定整个页面文字的大小

字体粗细

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;
}

|属性值|描述|
|none|默认.没有装饰线|
|underline|下划线.(常用)|
|ouveline|上划线(几乎不用)|
|line-through|删除线(不常用)|

文本缩进

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 行高 控制行与行之间的距离

引入方式

内部样式表