css_quickstart
目录
简介
CSS指层叠样式表(Cascading Style Sheets),主要用来设置网页中元素的样式,如边框、颜色、位置等…
层叠:一个元素(也即标签)可以拥有多个样式
基本语法
编写位置
-
内联样式 标签style属性内
缺点:不能复用,不能编写大量的样式
-
内部样式表
<style></style>
标签中,style标签放在head标签中 -
外部样式表
<link ref="stylesheet" type="text/css" href="文件路径">
语法规则
|
|
注释使用/* */
示例
html中引用css文件
|
|
css
|
|
选择器
标签选择器
使用标签名选择元素
|
|
类选择器
使用标签的class属性值选择元素,class 规定元素的类名,把元素进行分类
|
|
Id选择器
使用标签的id属性值选择元素,id 是元素的唯一标识
|
|
组选择器
选择一组选择器,选中的这些元素全部应用样式
|
|
派生选择器
1. 派生选择器
|
|
2. id派生选择器
|
|
3. 类派生选择器
|
|
4. >
直接子元素
|
|
组合演示
|
|
常用样式
颜色
|
|
颜色可以写颜色名,也可以写rgb值,如rgb(255,0,0),rgb值也可以使用十六进制进行表示,如#00F6DE
,如果写十六进制必须加#
宽度
|
|
宽度可以写像素值,也可以写成百分比值如 20%
。
高度
高度如果要设置成百分比,父元素必须有指定高度
背景颜色
background-color
扩展
-
黑色1像素实现边框
1
border: 1px solid black;
-
div居中
1 2
margin-left: auto; margin-right: auto;
-
文本居中
1
text-align: center;
-
超链接去下划线
1
text-decoration: none;
-
表格细线
1 2 3 4 5 6 7
table { border: 1px solid black; /* 设置边框 */ border-collapse: collapse; /* 将边框合并 */ } td,td { border: 1px solid black; /* 设置边框 */ }
-
列表去除修饰
1 2 3
ul { list-style: none; }