7月9日
1.什么是CSS
简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。
主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式
2.CSS引入方式
2.1行内样式
<p style="font-size: 16px; color: red;">大家好</p>
行内样式需要写到标签的 style 属性值中。
2.2内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is title</title>
<style>
p {
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<p>Hello everyone</p>
</body>
</html>
内部样式需要写到 <style> 标签中。
2.3 外链样式
将样式写到单独的文件中，文件的扩展名为 .css，然后通过 <link> 元素将 index.css 文件引入到页面中：
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is title</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<p>我是优秀的开发工程师</p>
</body>
</html>
css使用方式总结
- 定义在外部文件（外链样式）：开发中主要是通过这种形式定义样式。（推荐）
- 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。
- 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。（不推荐）
3.CSS基本语法
CSS 样式由一系列的规则集组成，规则集中有一条或多条样式声明，每条样式声明包含着一对属性名和属性值，属性名和属性值之间以冒号（:）隔开，样式规则之间以分号（;）隔开，最后一对样式声明后面可以省略分号。
4.CSS字体样式属性
4.1font-size:字体大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：
4.1.1 px
px单位名称为像素，像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。
4.1.2 em
em是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。若用于其他属性（width,height），则是相对于本身元素的font-size。
em单位有如下特点：
- em的值并不是固定的;
- em会继承父级元素的字体大小。
- 我们知道任意浏览器的默认字体大小都是16px。所有未经调整的浏览器都符合: 1em=16px。
em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算了，这不怎么方便，还好rem解决了这个问题。
4.2 font-family:字体
font-family属性用于设置字体。可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
注意：1.尽量使用偶数的数字字号。
2.各种字体之间必须使用英文状态下的逗号隔开。
3.如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号
4.3 font-weight:字体粗细
| 属性值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100~900 | 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
4.4font-style 字体风格
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
4.5 font:综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
5.css注释
/* 注释的内容*/
6.选择器
6.1 基本选择器（重点）
6.1.1 标签选择器
即直接使用标签的名字来进行设置样式。选择页面中所有的 <p> 元素，给它们设置字体大小和颜色。
6.1.2 Class 选择器
在标签里设置属性class=“类名”，并在
6.1.3 ID 选择器
在标签里设置属性id=“id名” 并在
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
6.14通配符选择器
* {
font-size: 24px;
color: blue;
}
6.2 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果
6.2.1 链接伪类选择器
-
:link /* 未访问的链接 */
-
:visited /* 已访问的链接 */
-
:hover /* 鼠标移动到链接上 */
-
:active /* 选定的链接 */
提示：
在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
a:active 必须位于 a:hover 之后，这样才能生效！
注意：a:link会对拥有a标签的属性href=""，即拥有实际链接地址的a对象发生效果
7.css外观属性
7.1 color：文本颜色
| 属性名 | color |
|---|---|
| 属性值 | 预定义的颜色名 | 十六进制值的颜色值 | RGB颜色值 |
| 默认值 | 在不同浏览器中，默认值可能不同，但是在大部分浏览器中默认值为黑色。 |
| 描述 | 设置文本的颜色 |
7.2 颜色半透明(css3)
文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：
color: rgba(r,g,b,a) a 是alpha 透明的意思 取值范围 0~1之间 color: rgba(0,0,0,0.3)
7.3 line-height：行间距
行高是指文本行基线间的垂直距离:基线与基线之间的距离。
| 属性名 | line-height |
|---|---|
| 属性值 | normal |数字 | 长度值 | 百分比 |
| 默认值 | normal |
| 描述 | 设置文本的行高 |
7.4 text-align：水平对齐方式
属性：
- **left：**内容左对齐。
- **center：**内容居中对齐。（重点）
- **right：**内容右对齐。
- **justify：**内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。
7.5 text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
7.6 text-decoration：文本修饰
属性：
- **none：**指定文字无装饰
- **underline：**指定文字的装饰是下划线
- **overline：**指定文字的装饰是上划线
- **line-through：**指定文字的装饰是贯穿线
7.7 text-transform：大小写转换
属性：
-
**none：**无转换
-
**capitalize：**将每个单词的第一个字母转换成大写
-
**uppercase：**将每个单词转换成大写
-
**lowercase：**将每个单词转换成小写
7.8 letter-spacing：字符间距
注意：改编汉字和字母之间的距离
- **normal：**默认间隔
- **长度值：**用长度值指定间隔。可以为负值。
7.9 word-spacing：单词间距
单词间距：增加或减少单词间的空白(即字间隔)，改变英文单词之间的距离
- **normal：**默认间隔
- **length：**用长度值指定间隔。可以为负值。
7.10 文字阴影(CSS3)（了解）
以后我们可以给我们的文字添加阴影效果了 Shadow 影子
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
-
前两项是必须写的。 后两项可以选写。
-
/* 多重阴影 */ text-shadow: -5px 0px cyan, 5px 0px red;
课堂总结
今天学习了css。css是层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。
学习了css的三种引入方式，行内样式，内部样式，外链样式。其中外链样式需要使用把css文件引入到html文件中。
学习了css字体样式属性，有字体大小（font-size），其中的属性值有px（像素）和em两种形式，em是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。若用于其他属性（width,height），则是相对于本身元素的font-size。font-family(字体家族)用来设置字体、font-weight(字体粗细)，其中500、 700 和bold比较常用。font-style(字体风格)，属性值italic用来设置斜体样式。还有font的综合设置，语法格式：选择器{font: font-style font-weight font-size font-family;}，其中前两个可以不写，但是后两个必须要有。
学习了基本选择器，标签选择器、class选择器、id选择器、通配符选择器。伪类选择器中的链接伪类选择器，：link表示为访问的链接、:visited已访问的链接、 :hover鼠标移动到链接上、:active 选定的链接
CSS外观属性:color(文本颜色)、颜色半透明(css3)、 line-height：行间距、 text-align：水平对齐方式、text-indent:首行缩进、text-decoration：文本修饰、text-transform：大小写转换、letter-spacing：字符间距， word-spacing：单词间距，特别注意的是：letter-spacing改编汉字和字母之间的距离， word-spacing：改变英文单词之间的距离。文字阴影(CSS3)，语法格式：text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
今天学的不是很多，但是很杂。又是充实的一天！
扫一扫
4413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
