目录
- css层叠样式表
- 样式声明方式:优先级由高到低
- css语法
- 基于css和div的页面布局
css层叠样式表
样式声明方式:优先级由高到低
- 元素内联样式:
???通过元素内style属性,用冒好分割键和值,用分号分割不同样式 ???<p style=”color: green;margin_left: 30px”></p>- 中的内联样式:
???在整个页面中有效,<style>标签中内容由选择器及其样式组成 ???<style type=”text/css”> ???p{color: green;margin_left: 30px} ???</style>- 外联样式:
???将css数据单独保存为一个文件,在<link>标签中引用,内容由选择器及其样式组成 ???<head> ???<link rel=”stylesheet” type=”text/css” href=”文件名.css”> ???</head>- 浏览器默认样式:不同浏览器不同
css语法
- 由选择器和样式属性组成:
selector{key1:value1 ;key2:value2…} - 四种基本选择器:
???通配选择器:*{} ???标签选择器:标签{} ???Class选择器:.class属性值{} ????标签.class属性值{} ???id选择器:#id属性值{} ??????标签#id属性值 {}- 基本组合:
???S1,S2{}:多选择器,满足S1或S2的标签 ???S1>S2:子元素选择器,S1的直接子标签为S2 ???S1 S2:后代选择器,S1中的S2标签 ???S1+S2:相邻选择器,后面紧随S2的S1标签- 其他选择器:
???[属性]{}:属性选择器,有该属性的标签 ???[属性=”值”]:属性和值选择器,属性等于该值的标签 ???链接已点击选择器:选择未访问、已访问、悬浮和活动链接，并设置它们的样式： ???a:link ???{color:blue;} ???a:visited {color:blue;} ???a:hover ??{color:red;} ???a:active ?{color:yellow;}基于css和div的页面布局
- css布局常用属性:
???position:元素位置类型absolute(绝对位置),relative(相对父元素的位置),static(固有位置) ???direction:元素内容靠哪侧ltr(靠左),rtl(靠右) ???float:元素本身靠屏幕哪侧left(左),right(右) ???hight(高度),width(宽度),margin(边框外部留白),border(边框),padding(边框内部填充):pt,px,%,emcss层叠样式表
原文地址：https://www.cnblogs.com/Wang-Y/p/9277773.html