css
CSS
要求:看懂
CSS是层叠样式表(Cascading Style Sheets):用来定义网页的显示效果。
html代码展示数据,css如何展示,以什么形式展示。
HTML与CSS结合
1 内联:每一个标签提供style属性,进行样式的设置。
例如:<body
style="...">
优缺点:该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改。
2 内部:HTML代码中
嵌入方式:<head><style
type="text/css">...css代码
引用方式:<head><style
type="text/css"> @import url("css文件的位置") ---不常用
3 外部:HTML之外,以单独文件形成存在
CSS文件,就是一个普通的文本,扩展名为css
格式:<link rel="stylesheet"
type="text/css" href="文件位置">
使用优先级:内联 > 内部 > 外部 >
浏览器默认
总结:由上到下,由外到内。优先级由低到高
格式:
选择器名称
{
属性名称:属性值;
属性名称:属性值;
....
}
CSS选择器
1 标签名:通过html标签的名称进行样式添加
例如:body{ ... }
2 class
选择器:通过html标签的class属性进行样式添加
格式:.选择器名称{ ... }
例如:.hello {
.... }
3 ID选择器:通过html标签的id属性进行样式添加
格式:#选择器名称{ ...
}
4 派生选择器:依据元素在其位置的上下文关系来定义样式
格式:p s{...}
5
组合选择器:多个不同选择器使用相同样式
格式:选择器1 ,选择器2,...{}
常用属性:
字体
文本
color:
#f00;
text-align: left; / 对齐方式:left、center、right
/
text-decoration: underline; / 下划线 /
背景
...