CSS-01-基础
1.CSS简介
简洁的设计页面
1.1什么是CSS
层叠样式表用来控制界面的外观风格的文档主要设置HTML页面的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)
1.2CSS三个重要属性
浮动、定位和盒子模型
2.CSS使用方式
2.1行内样式
<!DOCTYPE html>
<html lang="en"
<head>
<title>This is title</title>
</head>
<body>
<p style="font-size: 16px; coloc: red;">行内样式</p>
</body>
</html>
行内样式需要写到标签的 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>内部样式表</p>
</body>
</html>
内部样式需要写到
<style>
标签中
2.3外部样式表
将样式写进.css后缀文件中
p{
font-size: 16px;
color: pink;
}
然后通过<link>
元素引入
<!DOCTYYPE html>
<html lang="en">
<head>
<title>This is title</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<p>外部样式表</p>
</body>
</html>
2.4导入外部样式表
css文件中通过@import引入其他css文件
@import url(index.css);
2.5css使用方法总结
- 外链样式:开发中经常使用
- 内联样式:定义的样式只在本页面生效
- 行内样式:多用于测试
3.CSS基本语法
选择器{
声明
属性 值
font-size: 18px;
}
- 选择器是要改变样式的HTML元素
- 每条样式声明包含一对属性名和属性值
- 属性名和属性值之间一
(:)
隔开 - 样式规则之间以分号
(;)
隔开
4.CSS字体样式属性
4.1font-size
font-size属性用于设置字号
4.1.1px
- px单位名称是像素
- 大多数浏览器默认字体大小是16px,最小是12px
4.1.2em
em是相对字体长度单位,如果用于font-size属性,则是相对应于父元素的font-size
- em的值不是固定的
- em会继承父级元素的字体大小
4.2font-family: 字体
font-family属性用于设置字体。
p{
font-family:'楷体','宋体';
}
可以同时指定多个字体,中间以逗号隔开,浏览器会不支持第一个字体会自动尝试下一个字体
注意:
- 现在网页默认字体为微软雅黑,字体大小为16px
- 字体之间要用英文下的逗号隔开
4.3font-weight:字体粗细
font-weight属性可以定义字体粗细
属性值 | 描述 |
---|---|
normal | 默认的 |
bold | 粗体字体 |
bolder | 更粗的字体 |
lighter | 更细的字体 |
100~900 | 定义更粗或更细的字体。400约为默认的。700等同于bold。 |
4.4font-style:字体风格
字体倾斜用css实现
属性值 | 描述 |
---|---|
font-style | 定义字体风格 |
normal | 默认值 |
italic | 斜体 |
4.5font综合设置字体样式
选择器{
/* 加粗 */
font-weight: bold;
/* 斜体 */
font-style: italic;
/* 字体大小 */
font-size: 2em;
/* 字体 */
font-family: 'Arial''楷体';
/* 上面的四行代码等价于下面这一行 */
/* font: bold italic 2em '楷体'; */
}
font-weight
和font-style
这两个可以不写font-size
必须写在font-family
前面,各个属性以空格隔开。其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
5.选择器
5.1标签选择器
p{
font-size: 16px;
color: red;
}
选择页面中的
<p>
元素设置字体大小和颜色
5.2class选择器
.box{
font-size: 20px;
color: green;
}
选择页面中class属性值包含box类名的所有元素设置字体颜色和大小
5.3ID选择器
#nav{
font-size: 20px;
color: green;
}
选择页面中ID属性值是nav类名的所有元素设置字体颜色和大小
ID选择器和类选择器区别
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
类选择器(class) 好比人的名字, 是可以多次重复使用的。
id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。
5.4通配符选择器
*{
font-size: 20px;
color: green;
}
5.5 链接伪类选择器
<style>
/* 链接伪类选择器 */
a:link {
color: black;
text-decoration: none;
}
/* 悬停伪类 */
a:hover {
color: red;
}
/* 活跃伪类 */
a:active {
color: aqua;
}
/* 访问过后的伪类 */
a:visited {
color: green;
}
</style>
注意:
在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!
a:active 必须位于 a:hover 之后,这样才能生效!
a:link会对拥有a标签的属性href=“”,即拥有实际链接地址的a对象发生效果
6.CSS外观属性
6.1color: 文本颜色
属性名 | color |
---|---|
属性值 | 预定的颜色名|十六进制值的颜色|RGB颜色 |
默认值 | 大部分浏览器默认为黑色 |
描述 | 设置文本的颜色 |
6.2颜色半透明
/* a是alpha透明的意思,取值范围0~1之间*/
color: rgba(r,g,b,a)
color: rgba(0,0,0,0.3)
6.3line-height:行间距
行高是指文本行基线间的垂直距离:基线与基线之间的距离。
属性名 | line-height |
---|---|
属性值 | normal|数字|长度值|百分比 |
默认值 | normal |
描述 | 设置文本行高 |
- normal:默认值。行高由浏览器自动处理。
6.4text-align:水平对齐方式
属性名 | text-align |
---|---|
属性值 | left|right|center|justify |
默认值 | 如果文本方向为ltr,默认值是left;如果文本方向为rtl,默认值是right |
描述 | 文本在水平方向上的对齐方式 |
- left内容左对齐
- center内容水平居中对齐
- right内容右对齐
6.5text-indent:首行缩进
text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置单位。
6.6text-decoration:文本修饰
属性名 | text-decoration |
---|---|
属性值 | none|underline|overline|line-through |
默认值 | none |
描述 | 文本修饰 |
- none指文字无装饰
- underline下划线装饰
- overline上划线装饰
- line-through贯穿线装饰
6.7letter-spacing:字符间距
属性名 | letter-spacing |
---|---|
属性值 | normal |
默认值 | normal |
描述 | 增加或减少字符间的空白 |
6.8word-spacing(单词)
属性名 | word-spacing |
---|---|
属性值 | normal|length |
默认值 | normal |
描述 | 增加或减少字符间的空白 |
6.9文字阴影
可以给文字添加阴影效果
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
-
前两项是必须写的。 后两项可以选写。
-
/* 多重阴影 */ text-shadow: -5px 0px cyan, 5px 0px red;