css基本知识
Cascading Style Sheet层叠样式表
标签:<p> <div>…之类的标签 使用方式:直接输入标签名
类(class):class名字 使用方式:输入点+class名
ID:ID名 使用方式:输入#+id名
一般来说我们写CSS文件的时候用的都是第二种方法,class名
这是因为ID名一般被用作JS的选择器
给class命名也是有规范的,像xxx-xxxx 这样做的好处是让你的代码更清晰
别人也更容易看懂
三种连接样式
行内样式(内嵌样式):
直接写在标签里,使用style属性,只对当前标签有效,页面内容和表现形式是高度耦合的,不利于分工合作
内部样式(内联样式):
内部样式是在head部分使用<style>标签,样式对当前页面有效,内容和表现形式实现了一定程度的分离,但不彻底
外部样式(外联样式):
外部样式需要一个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
案例:望月怀远
海上升明月,天涯共此时。 /大小24px 字体楷体 靠左
情人怨遥夜,竟夕起相思。 /颜色红色,靠右
灭烛怜光满,披衣觉露滋。 /左半句靠左,右半句靠右
不堪盈手赠,还寝梦佳期。 /大小30px 颜色蓝色 字体幼圆 居中
案例:
我是江西小霸王
江西这边我最狂
要说江西谁最帅
还得江西小霸王
行高5px
自己想一个题目,标签h1
第一句黑体,红色
第二句加删除线
第三句加上、下划线 从“西”处断开,分为“要说江西” “谁最帅” 间距50px
第四句单词间距10px