CSS常用知识点
- css概述：Cascading Style Sheets：层叠样式表
使用div标签+css编辑网页
-
css的简单语法：
- 在一个style标签中编写css内容，sytle标签最好写在head标签中
-
css的引用方式：
-
外部样式：通过link标签引入一个外部的css文件
<!DOCTYPE html> <html> <head> <!--这是head--> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/demo.css" /> </head> <body> <!--这是body--> </body> </html>
-
内部样式：直接在style标签内编写css代码
<style> 选择器{ 属性名称:属性的值; 属性名称2: 属性的值2; } </style>
-
行内样式：直接在标签中添加一个style属性，编写css样式
-
-
css选择器：帮助我们找到我们要修饰的标签或元素
-
元素选择器：
元素名：{ 属性名：属性值； 属性名：属性值 } -
类选择器：
以.开头 .类名{ 属性名：属性值； 属性名：属性值 } -
ID选择器：ID在整个页面中必须是唯一的
以#号开头 #ID{ 属性名：属性值； 属性名：属性值 } -
选择器分组：选择器1，选择器2 { 属性名：属性值；属性名：属性值 }
-
属性选择器：属性用中括号扩起来，可以多个属性
div[title] div[title='aaa'] div[title][...] -
派生选择器：
比方说<li><strong></strong></li>要找到strong li strong{ ... } -
子元素选择器：父选择器 > 子选择器
-
伪元素选择器：通常在a标签上使用
-
-
css的盒子模型
- 内边距
- padding-top
- padding-right
- padding-bottom
- padding-left
- padding：..px ..px ..px ..px 以上右下左顺时针方向排列 如果只写两个，那么第一个是上下 第二个是左右
- 外边距
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin：顺序跟内边距类似
- 内边距
-
css绝对定位：
- position：absolute
- top：控制距离顶部的位置
- left：控制距离左边的位置
-
css浮动：
-
float：left，right 不再占有正常文档流中的控件，流式布局
-
使用后清楚浮动clear：both/left/right
<!--清除浮动--> <div style="clear: both;"></div>
-
网友评论