css语法规范、选择器、字体、文本

css语法规范

使用 HTML 时需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。

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

  • 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
  • 属性和属性值以键值对的形式出现，属性和属性值之间用英文冒号:分开
  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  • 多个键值对之间用英文分号;进行区分
  • 所有的样式，都包含在<style>标签内，表示是样式表。<style> 一般写到 </head> 上方。
<head>
	 <style>
		 h4 {
			 color: blue;
			 font-size: 100px;
		 }
	 </style>
</head>

css代码风格

以下代码书写风格不是强制规则，而是符合实际开发的书写规范，增加阅读性

格式书写

① 紧凑格式

h3 { color: deeppink;font-size: 20px;}

② 展开格式

h3 {
 color: pink;
 font-size: 20px; 
}

推荐使用展开格式，即一个键值对占一行

CSS 代码风格

大小写

推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

空格规范

① 属性值前面，冒号后面，保留一个空格

② 选择器（标签）和大括号中间保留空格

选择器

基础选择器

  • 基础选择器是由单个选择器组成的

  • 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式

语法

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

注意

  • 标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。
  • 能快速为页面中同类型的标签统一设置样式。不能设计差异化样式，只能选择全部的标签，要改就全改

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

语法

标签需要定义class属性，样式书写格式.属性名

<div class="red"> 变红色 </div>

.red {
    color: red;
}

注意：

  • 类选择器使用.（英文点号）进行标识，后面紧跟类名（自定义）
  • 可以理解为给这个标签起了一个名字
  • 长名称或词组可以使用中横线来为选择器命名。 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
  • 命名要有意义，尽量使别人一眼就知道这个类名的目的。

类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选中这个标签。简单理解就是一个标签有多个名字。

<div class="red font20">亚瑟</div>

(1) 在标签class 属性中写 多个类名

(2) 多个类名中间必须用空格分开

id选择器

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以# 来定义。

<div id="id名"></div>

#id名 {
	属性: 属性值；
}

id名不能重复

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

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

② id 选择器好比人的身份证号码，是唯一的，不得重复。

③ id 选择器和类选择器最大的不同在于使用次数上。

④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

通配符选择器

在 CSS 中，通配符选择器使用*定义，它表示选取页面中所有元素（标签）。

语法

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

基础选择器总结

复合选择器

后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法： 元素1 元素2 { 样式声明 } 表示选择元素 1 里面的所有元素 2 (后代元素)。

例：

ul li { 样式声明 } 	/* 选择 ul 里面所有的 li标签元素 */

注意：

  • 元素1 和 元素2 中间用空格隔开
  • 元素1 是父级，元素2 是子级，最终选择的是元素2
  • 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
  • 元素1 和 元素2 不一定是元素，也可以是基础选择器，只要能定位到标签元素即可

子选择器（重要）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

语法：元素1 > 元素2 { 样式声明 } 表示选择元素1 里面的所有直接后代(子元素) 元素2。

例：

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
  • 元素1 和 元素2 中间用大于号> 隔开
  • 元素1 是父级，元素2 是子级，最终选择的是元素2
  • 元素2 必须是亲儿子，其孙子、重孙之类都不归他管。也可以称作亲儿子选择器

并集选择器

并集选择器可以选择多组标签， 同时为他们定义相同的样式，通常用于集体声明。
并集选择器是各选择器通过英文逗号,连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法：

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

例：

div,
span {
    color: red;
}

注意：

  • 约定的规范，并集选择器标签一般竖着写
  • 最后一个标签后不能加逗号

伪类选择器

链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号:表示，比如 :hover 、 :first-child 。
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

/* a 是标签选择器 所有的链接 */
a {
	color: gray;
    text-decoration: none;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
	color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
    text-decoration: underline;
}

注意：

  • 因为链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

  • 为了确保生效，请按照 LVHA 的循顺序声明，即 :link－:visited－:hover－:active

表单伪类选择器

:focus

/*当光标在输入框时背景变成粉色*/
input: focus {
    background: pink;
}

总结

字体

字体样式

CSS 使用 font-family 属性定义文本的字体系列。

p { font-family:"微软雅黑";} 
div {font-family: Arial，"Microsoft Yahei"， "微软雅黑";}
  • 各种字体之间必须使用英文状态下的逗号隔开
  • 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

CSS 使用 font-size 属性定义字体大小。

p { 
 font-size: 20px; 
}
  • px（像素）大小是我们网页的最常用的单位
  • 谷歌浏览器默认的文字大小为16px
  • 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小
  • 可以给 body 指定整个页面文字的大小
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
inherit 规定应该从父元素继承字体尺寸。

**CSS 使用 font-weight 属性设置文本字体的粗细。 **

p { 
 font-weight: bold;
}

学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗 ，实际开发时，我们更喜欢用数字表示粗细

CSS 使用 font-style 属性设置文本的风格

值 描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。

注意： 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体

总结

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

文本

文本颜色

颜色属性被用来设置文字的颜色。

body {
    color:red;
}
h1 {
    color:#00ff00;
}
p {
    color:rgb(0,0,255);
}
值 描述 实例
颜色的名称 颜色的名称，比如red, blue, brown, lightseagreen等，不区分大小写。 color: red;
*十进制 十六进制符号 #RRGGBB 和 #RGB（比如 #ff0000）。"#" 后跟 6 位或者 3 位十六进制字符（0-9, A-F）。 #f03 #F03 #ff0033 #FF0033
RGB，红-绿-蓝（red-green-blue (RGB)） 规定颜色值为 rgb 代码的颜色，函数格式为 rgb(R,G,B)，取值可以是 0-255 的整数或百分比。 rgb(255,0,51) rgb(100%,0%,20%)

对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。

div { 
 	text-align: center;
}
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div { 
 text-decoration：underline； 
}
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。

文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

值 描述
length 定义固定的缩进。默认值：0。
% 定义基于父元素宽度的百分比的缩进。
inherit 规定应该从父元素继承 text-indent 属性的值。

  • 通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

  • em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小，如果当前元素没有设置大小，则会按照父元

    素的 1 个文字大小。

行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

p { 
 line-height: 26px;
}
值 描述
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

总结

posted @   至安  阅读(286)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示