css基础

时间:2024-01-19 15:01:20

一. web标准化
(1).内容与样式,行为分离
(2).html用来定义语义内容,以及内容的结构 (xhtml)
(3).xhtml标准
a.xhtml 必须强制指定文档类型 DocType,HTML 不需要
b.xhtml 所有标签必须闭合(要有一个相应的结束标记),HTML 比较随意
c.xhtml 严格区分大小写,所有标签的元素和属性的名字都必须使用小写
d.xhtml 规定所有属性都必须有一个值,没有值的就重复本身
e.html5是xhtml的升级版,文档中只使用语义化标签,放弃样式相关的标签
(3).以css来定义页面的样式
(4).javascript定义交互行为,以及前端的业务逻辑

html(内容) + css(样式) + js(行为)

二. css (级联样式表)
1.css的写法 (cascading style sheet)
选择器 {属性1:属性值1;属性2:属性值2;...}

2.样式表的引用
(1).行内样式:html元素中添加style属性 (优先级:1)
when:某个元素需要定义特别样式时,使用
(2).内联样式: 页面中添加<style>标签 (优先级:2)
when:只针对当前一个页面定义特殊样式
(3).外部样式表:<link /> (优先级:3)
when:对多个页面的共性样式定义

3.选择器
(1).标签选择器 (优先级:3)
对当前页面所有指定的标签应用样式
(2).类选择器 . (优先级:2)
对于指定了特定类的多个元素应用样式
(3).id选择器 # (优先级:1)
对于指定id的单个元素应用样式

(4).选择子元素
多个选择器之间用空格隔开,表示有包含关系
(5).分组选择器
多个选择器之间用,隔开

4.属性与属性值
(1).常用尺寸单位
a.em 相对于元素内当前文本大小的倍数
b.pt 1pt= 1/72 英寸
c.px
d.百分比

(2).文本属性
a.text-indent 文本缩进
b.text-align 内容水平对齐方式
c.word-spacing 英文单词间距
d.letter-spacing 字符间距
e.text-decoration 文本修饰
f. color 字体颜色
g. font-size 字体大小
h. font-family 字体
(3).背景属性
a.background-color:背景颜色
b.background-image:背景图片
以上可以简写成background
c. background-size 背景尺寸,cover, contain
d. background-repeat 背景图片重复
no-repeat
e.background-position 背景位置,坐标原点是左上角
f.background-attachment 背景随页面滚动的方式,fixed是固定

(4).伪类:根据元素不同的状态定义相应的样式
a:link {}
a:visited {}
a:hover {}
a:active {}