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
<!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
```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
<!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
.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
<!DOCTYPE html><html><head><meta charset="utf-8"><title>案例2</title><style type="text/css">divp{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的基础概念 行内样式(内嵌样式) 内部样式(内联样式) 外部样式(外联样式) 字体相关属性及相关练习的案例