下次一定

css简介

美化网页,布局页面。

基本语法:

selector {declaration1; declaration2; ... declarationN }

css选择器

css选择器分为 基础选择器复合选择器

基础选择器

基础选择器 由单个选择器组成;其中,又包括标签选择器、类选择器、id选择器和通配符选择器。

标签选择器

标签选择器(元素选择器),是指使用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式;略显僵硬,不能差异化设置;

1
2
3
h1 {
color: red;
}
1
<h1>标签选择器</h1>

类选择器

对特定标签进行差异化处理,语法:.important {color:red;};

在css中以.显示;在HTML中以class属性显示;

1
2
3
.green {
color: green;
}
1
2
<h1 class="green">类选择器</h1>
<p class="green">类选择器</p>

多类名

HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:
`


This paragraph is a very important warning.

`

id选择器

在某些方面,ID 选择器类似于类选择器;

区别 1:只能在文档中使用一次
与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。

区别 2:不能使用 ID 词列表
不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。

区别 3:ID 能包含更多含义
类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。例如,您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容,它可能在任何元素中,而且只能出现一个。

语法如下:

1
#intro {font-weight:bold;}
1
<p id="intro">This is a paragraph of introduction.</p>

通配符选择器

给当前界面上所有的标签设置属性。(*的意思是选中所有的标签)

1
2
3
*{
color: red;
}

文本属性

常用

font-family
font-size
font-weight
font-style

复合

简写 空格间隔 不可颠倒顺序 size 和 family不可省略。

font: font-style font-weight font-size/line height font-family;

文本颜色

文本对齐

text-align属性设置与设置元素内文本内容的水平对齐;

属性值 解释
left
right
center

装饰文本

text-decoration用以给文本添加下划线、删除线和上划线等;

属性值 描述
none 默认
underline
overline
line-through

文本缩进

text-indent用于文本首行缩进,例如:

div { text-indent: 10px; }

em是一个相对单位,为当前元素(font-size)1个文字的大小;

行间距

line-height属性用途设置行间距;

CSS引用

行内式

写在HTML页面内部,把所有的css代码放置在<style>内部;<style>标签可以放置在页面任何地方,但一般在<head>标签内部;

嵌入式

在元素内部style属性里修改,例如:

1
2
3
<div style="color: pink;">
嵌入式style;
</div>

链接式

单独写入CSS文件中,之后引用使用。

  1. 建立css文件,内部格式直接写入样式;

  2. 通过<link>标签引入css文件,如:

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

Chrome 调试工具

语法进阶

Emmet语法

  1. 快速生成HTML结构;

  2. 快速生成语法;

下次一定

CSS复合选择器

复合选择器是建立在基本选择器之上的,是对基础选择器的组合;

  • 更准确,更高效;

  • 由两个基础选择器组成;

  • 常用选择器:后代选择器、子选择器、并集选择器、伪类选择器;

子元素选择器

缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

语法:h1 > strong {color:red;}

后代选择器

如果只对 h1 元素中的 em 元素应用样式,语法:h1 em {color:red;}

后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”,但是要求必须从右向左读选择器。

并集选择器

使用,表示and,可以将其他选择器加入作为并集选择器的一部分;

选择并设置所有 <h1> 样式和所有 <p> 元素的样式:

h1,p { background-color:yellow; }

伪类选择器

<a>

用于向某些选择器添加特殊的效果,使用:,语法:

selector : pseudo-class {property: value}

1
2
3
4
5
6
7
a:link {color: #FF0000}		/* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */
  1. 按照LVHA顺序书写;

  2. 不必全部使用;

focus

focus伪类选择器,用于选取获得焦点的表单元素;

一般情况下,<input>类表单元素才能获取,因此这个选择器也主要使用于表单元素;

input:focus { background-color: pink; }

css 显示模式

块元素

  1. 同行排他性;

  2. 宽高边距可控;

  3. 宽度默认为容器的100%;

  4. 内部可放置块元素行元素

!: 文字类元素内不能使用块元素;如:<p> <h1> 等;

行元素

行元素,也称内联元素

常见元素有:<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>等;

  1. 一行可显示多个;

  2. 宽高无法直接设置;

  3. 默认宽度为本身内容宽度;

  4. 行内元素只能容纳文本或其他行内元素;

!: 链接内不可套娃;<a> 可放置块元素,但是需要转换为块元素;

行内块元素

常见:<img> <input> <td>;

  1. 一行可显示多个(行元素特点);

  2. 默认宽度为本身内容宽度(行元素特点);

  3. 宽高边距可控(块元素特点);

元素显示模式转换

display: block; 用于行元素转换成块元素;

display: inline; 用于块元素换成行元素;

dispaly: inline-block;行内块;

单行垂直居中

让文字的行高等于盒子高度。

CSS 背景

背景颜色

属性为background-color, 默认为透明色,即background-color: transparent;

背景图片

属性为background-image, 便于控制位置;实际开发常见logo,或者一些装饰性的小图片或者超大的背景图片;属性使用url()

背景平铺

使用background-repeat属性;属性值以下:

repeat | no-repeat | repeat-x | repeat-y

背景位置

使用background-position: x y;

属性 属性值 说明
lengh
position right center left

视差滚动

背景图像固定

background-attachment

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

背景复合写法

background: color url repeat attachment position;

背景色半透明

background: rgba(0, 0, 0, 0.3)

r = red;

g = green;

b = blue;

a = algha;

背景总结

CSS 三特性

层叠性

继承性

优先级

盒子模型

border

属性:border-width,border-style,border-color

skip~

skip~

skip~

skip~

skip~

skip~

ps

待续