web前端第四天

CSS学习笔记

CSS的基本概念
Cascading Style Sheet 层叠样式表

选择器
标签：

…之类的标签 使用方式：直接输入标签名
类（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 （px：像素）
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（全部小写）

1
2

line-height（行高）：normal/xx px
letter-spacing（字符间距）：2px/5px/xxxpx
word-spacing（单词间距）：normal/2px/5px/xxxpx