2020-08-25

CSS学习笔记 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