Web前端开发学习笔记 - Day03
程序员文章站
2022-05-10 22:57:09
...
Day03学习笔记
1. CSS引入方式
1.1 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is title</title>
</head>
<body>
<p style="font-size: 16px; color: red;">大家好</p>
</body>
</html>
行内样式写在标签的 style 属性值中。
1.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>标签中
1.3 外部样式
- 外部样式写在单独的文件中，扩展名
.css。在<head>中通过<link>标签引入。
<!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引入方式总结
- 行内样式：写在标签的 style 属性值中。可维护性较差。
-
内部样式：写在
<style>标签中。只在本页面生效。 -
外部样式：单独的CSS文件，在
<head>中通过<link>标签引入。
2. CSS字体样式属性
2.1 font-size：字体大小
用于设置字体字号，可以使用相对长度单位和绝对长度单位。
一些小知识：
- 浏览器默认字体大小：16px。
- 建议用偶数来设定字体大小，IE6等老式浏览器支持奇数会有Bug。
格式：
p{
font-size: 18px;
}
2.1.1 单位
- px：像素。相对长度单位。相对于电脑屏幕。
- em：相对长度单位，相对于父级字体字号。
- rem：CSS3新增的单位，rootem，相对长度单位，相对于html标签的字体字号。
2.2 font-family：字体
用于设置字体。
格式：
p{
font-family: "微软雅黑";
}
可以设置多个字体，中间用逗号隔开，如果浏览器不支持第一个会自动尝试下一个，直到找到可用字体。
p{
font-family: "微软雅黑","宋体","黑体";
}
一些小知识：
- 要设置英文字体时,要放在字体设置的前面。
- 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
2.3 font-weight：字体粗细
字体加粗除了用 b 和 strong 标签之外，可以使用css 来实现。
属性值：
| 值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100~900 | 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
格式：
p{
font-weight: bold;
}
一些小知识：
- normal属性和数值400相等，bold属性和数值700相等，最好用数字来表示。
2.4 font-style：字体风格
用于设置字体风格，字体倾斜除了用 i 和 em 标签之外，可以使用css 来实现。
属性值：
| 值 | 描述 |
|---|---|
| normal | 默认值。标准的字体样式。 |
| italic | 斜体。 |
| onlique | 强制倾斜。 |
格式：
p{
font-style: italic;
}
一些小知识：
- css直接给文字加样式变斜体的时候非常少，可以直接用斜体标签（em，i）。
font：简写字体样式设置
字体样式可进行简写形式，一行代码同时设置字号、字体、粗细、风格。
格式：
p{
font:italic 700 20px "黑体";
font：font-style font-weight font-size font-family;
}
注意点：
- 使用font简写形势时：必须按照格式顺序书写，不能更换顺序，属性用空格隔开。
- 其中不需要设置的可以省略，但是必须保留 font-size 和 font-family 属性，否则font属性没有作用。
3. CSS注释
格式：
/* ... */
p{
width:500px; /* 给P标签设置宽度为500像素 */
}
4. 选择器
4.1 四大基本选择器
4.1.1 标签选择器
格式：
p{
font-size:18px;
}
直接用标签作为选择器，给页面中的所有P标签设置统一样式。
4.1.2 Class选择器
格式：
.box{
width: 500px;
}
选择页面中 class 属性值中包含 box 类名的所有元素，给它们设置样式。
4.1.3 ID选择器
格式：
#box{
width: 500px;
}
选择页面中 id 属性值中为 box 的元素，给它设置样式。
Class选择器和ID选择器的区别
- Class类名在页面中可以出现多次，相当于名字。允许重名存在。
- Id在页面中只允许出现一次，相当于身份证，一个身份证对应一个人，不允许重复的存在。
4.1.4 通配符选择器
格式：
*{
margin：0;
}
代表页面中所有标签。
注意：
- 通配符选择器慎用:会匹配所有的元素,影响页面加载的速度,影响页面的性能
4.2 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。
4.2.1 链接伪类选择器
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
注意：
- 在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited，a:active 必须位于 a:hover 之后，才能生效！
- 如果使用
:link伪类，使用的a标签的属性href=“”，必须要有实际的值，才能生效。
格式：
a{
color: red;
}
a:hover{
color: green;
}
5. CSS外观属性
5.1 color：文本颜色
用来设置文本的颜色。属性值可以是预定义的颜色名，可以是十六进制值的颜色值，也可以是RGB颜色值。
格式：
p{
color: red;
/* color:#ff0000 */
/* color: rgb(255,0,0) */
}
一些小知识：
-
Color属性值是十六进制颜色值时，如果都一样，可以简写，比如 #ff0000 可以简写成 #f00 。
-
颜色透明：rgba属性，比rgb多了一个属性值，控制透明度，取值0-1。
p{ color: rgba(255,0,0,0.5); }
5.2 line-height：行间距
用来设置行高，也就是文本行基线间的垂直距离。
属性值：
| 属性名 | line-height |
|---|---|
| 属性值 | normal |数字 | 长度值 | 百分比 |
| 默认值 | normal |
- normal：默认值，行高由浏览器自动处理。
- 数字：行高 = 数字 * 字体大小，例如：
line-height：2; font-size: 16px，则行高等于：2 * 16px = 32px。 - 长度值：使用长度值设置行高，例如：
line-height：32px。 - 百分比：基于当前字体大小的百分比。
格式：
p{
font-size: 18px;
line-height: 28px;
}
一些小知识：
- 行高设置比字号大7~8像素就可以了，例如：
font-size：18px;line-height：28px。 - 行高设置与容器高度一致时，文本垂直居中。
5.3 text-align：水平对齐方式
用来设置文本的对齐方式。
属性值：
- left：内容左对齐。
- center：内容居中对齐。
- right：内容右对齐。
- justify：内容两端对齐，对于强制打断的行及最后一行不做处理。
格式：
p{
text-align: center;
}
5.4 text-indent：首行缩进
用于设置首行文本的缩进，单位可以是数值、em、相对于浏览器窗口宽度的百分比，允许使用负值。
格式：
p{
text-indent: 2em;
}
5.5 text-decoration：文本修饰
用来对文本进行修饰，比如下划线等。
属性值：
- none：指定文字无装饰
- underline：指定文字的装饰是下划线
- overline：指定文字的装饰是上划线
- line-through：指定文字的装饰是贯穿线
格式：
p{
text-decoration: dunderline;
}
5.6 text-transform：大小写转换
用来修饰英文的大小写。
属性值：
- none：无转换
- capitalize：将每个单词的第一个字母转换成大写
- uppercase：将每个单词转换成大写
- lowercase：将每个单词转换成小写
格式：
p{
text-transform: capitalize;
}
5.7 letter-spacing：字符间距
用来控制字符的间距。更适合汉字间距。
属性值：
- normal：默认间隔
- 长度值：用长度值指定间隔。可以为负值。
格式：
p{
letter-spacing: 2px;
}
5.8 word-spacing：单词间距
用来控制单词间距。更适合英文单词间距。
属性值：
- normal：默认间隔
- 长度值：用长度值指定间隔。可以为负值。
格式：
p{
word-spacing: 2px;
}
5.9 text-shadow：文字阴影
用来给文字添加阴影部分。
属性值：
- h-shadow：水平阴影的位置，允许负值。必需。
- v-shadow：垂直阴影的位置，允许负值。必需。
- blur：羽化值，模糊的距离。可选。
- color：阴影的颜色。
格式：
p{
text-shadow: 3px 3px 5px rgba(255,0,0,0.5);
}
下一篇： debug