CSS学习笔记
CSS的基本概念
Cascading Style Sheet层叠样式表
标签：<p> <div>…之类的标签 使用方式：直接输入标签名
类（class）：class名字 使用方式：输入点+class名
ID: ID名
使用方式：输入#+id名
一般来说我们写CSS文件的时候用的都是第二种方法，class名
这是因为ID名一般被用作JS的选择器
给class命名也是有规范的，像xxx-xxxx 这样做的好处是让你的代码更清晰
别人也更容易看懂
**
三种连接样式
**
行内样式（内嵌样式）
直接写在标签里，使用style属性，只对当前标签有效，页面内容和表现形式是高度耦合的，不利于分工合作
内部样式（内联样式）：
内部样式是在head部分使用
外部样式（外联样式）
外部样式需要一个link标签来与html连接起来，内容与表现形式完全分离，而且任何需要用到改样式的页面都可以通过link标签连接的方式来实现。
字体相关属性：
text-align（对齐方式）：center（居中）/left（靠左）/right（靠右）
font-size（字体大小）：56px/24px /xxpx
font-family（字体体系）：“黑体”/“幼圆”
font-style（是否倾斜）: italic（倾斜）/normal（正常）
font-weight（字体粗细）：100/200/normal（400）/bold（700）/bolder
font-variant（是否大写）：normal/small-caps（小型大写）
color（字体颜色）：blue/red/pink/black/green/#FFFFFF/#F6F6F6
text-decoration: none（默认格式，无）/underline（下划线）/overline（上划线）/line-through
direction(文本方向): ltr(left to right从左到右)/rtl（right to left从右到左）
text-transform(大小写): none（默认）/capitalize(首字母大写)/uppercase（全部大写）/lowercase(全部小写)
line-height(行高): normal/xx px
letter-spacing(字符间距): 2px/5px /xxxpx
word-spacing(单词间距)：normal/2px/5px/xxxpx
案例1：望月怀远
海上升明月，天涯共此时。 /大小24px 字体楷体 靠左
情人怨遥夜，竟夕起相思。 /颜色红色，靠右
灭烛怜光满，披衣觉露滋。 /左半句靠左，右半句靠右
不堪盈手赠，还寝梦佳期。 /大小30px 颜色蓝色 字体幼圆 居中
案例2：
我是江西小霸王
江西这边我最狂
要说江西谁最帅
还得江西小霸王
行高5px
自己想一个题目，标签h1
- 第一句黑体，红色
- 第二句加删除线
- 第三句加上、下划线 从“西”处断开，分为“要说江西” “谁最帅” 间距50px
- 第四句单词间距10px
DOME1.HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo1</title> <style type="text/css"> /* p{ font-size:24px; } */ </style> <link rel="stylesheet" type="text/css" href="Demo1.css" /> <style type="text/css"> p{ font-size:24px; } </style> </head> <body> <div class="poetry"> <h1 style="color:green;font-size:24px;">绝句</h1> <p id="text1">两个黄鹂鸣翠柳</p> <p class="text2">一行白鹭上青天</p> <p class="text3">窗含西岭千秋雪</p> <p class="text4">门泊东吴万里船</p> </div> </body> </html>
DOME1.CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29```css .poetry{ /*test-align: right;*/ text-align: center; } p{ font-size: 24px; } #text1{ /* color:pink;*/ } .text4{ text-align: right; } .text2{ text-align: left; } .text3{ font-family: "幼圆"; /* 字体样式 */ font-size: 50px; /* 字体大小 */ font-style: italic; /* 是否倾斜 */ font-weight: bold; /* 字体粗细 */ }
案例1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例</title> <style type="text/css"> /* p{ font-size:24px; } */ </style> <link rel="stylesheet" type="text/css" href="案例.css" /> <style type="text/css"> p{ font-size:24px; } </style> </head> <body> <div class="poetry"> <h1 style="font-size:24px;font-family: 楷体;text-align: center">望月怀远</h1> <p id="text1">海上升明月，天涯共此时.</p> <p class="text2">情人怨遥夜,竟夕起相思.</p> <p class="text3">灭烛怜光满,披衣觉露.</p> <p class="text4">不堪盈手赠,还寝梦佳期.</p> <p style="text-decoration: underline;">123456</p> <p style="text-decoration: line-through;">123456</p> <p style="text-decoration: overline;">123456</p> <p style="text-direction: rtl;">6 7 8 9</p> <p style="text-direction: ltr;">9 8 7 6</p> <p style="text=transform: none;">Welcome To Jiaxing</p> <p style="text=transform: capitaliza;">Welcome To Jiaxing</p> <p style="text=transform: uppercase;">welcome to jiaxings</p> <p style="text=transform: lowercase;">Welcome To Jiaxing</p> <p style="line-height: normal;"> 正常行高<br> 正常行高<br> 正常行高 </p> <p style="line-height: 42px"> 42行高<br> 42行高<br> 42行高 </p> <p stype="letter-spacing: normal;">welcome</p> <p stype="letter-spacing: 10px">welcome</p> <p stype="letter-spacing: 10px">66666</p> <p stype="word-spacing: 500px">行 高</p> <p stype="word-spacing: normal">行 高</p> </div> </body> </html>
案例1.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32.poetry{ text-align: center; /*test-align: right;*/ } p{ font-size: 24px; } #text1{ font-size: 24px; font-family: 楷体; text-align: left; /* color:pink;*/ } .text4{ text-align: right; } .text2{ text-align: right; color: red; /* color: red;*/ } .text3{ font-family: "幼圆"; /* 字体样式 */ font-size: 50px; /* 字体大小 */ font-style: italic; /* 是否倾斜 */ font-weight: bold; /* 字体粗细 */ }
案例2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例2</title> <style type="text/css"> div p{ line-height:5px; } </style> </head> <body> <div> <h1 style="font-size:24px;font-family: 楷体">江西谣</h1> <p style="font-family: 黑体;color: red;">我是江西小霸王</p> <p style="text-decoration: line-through;">江西这边我最狂</p> <p style="text-decoration: underline overline; word-spacing: 50px;">要说江西 谁最帅</p> <p style="letter-spacing: 10px;">还得江西小霸王</p> </div> </body> </html>
最后
以上就是魔幻月光最近收集整理的关于CSS的基础概念、行内样式（内嵌样式）、内部样式（内联样式）、外部样式（外联样式）、字体相关属性及相关练习的案例三种连接样式的全部内容，更多相关CSS内容请搜索靠谱客的其他文章。
发表评论 取消回复