CSS入坑记录
一.插入方式
1.内联样式表(行内样式)
<body style="background-color:green; margin:0; padding:0;"></body>
2.内嵌样式表(内部样式)
<style type="text/css"></style>
3.外部样式表
<link rel="StyleSheet" type="text/css" href="style.css">
二.选择器
1.标签选择器
p {font-size:15px;}
2.类选择器
.class_name {font-size:15px;}
3.ID选择器(去掉那个括号直接使用#，囧)
(#)id_name {font-size:15px;}
4.组合选择器
h1,h2,h3 { font-size: 14px; color: red; }
5.子类选择器
<h1><strong></strong> <strong></strong></h1>
h1 > strong {color:red;}
6.后代选择器
<h1><em></em></h1>
h1 em {color:red;}
7.属性选择器
<a title="">
<a href="">
<a title="" href="">
*[title] {color:red;}
a[href] {color:red;}
a[href][title] {color:red;}
8.伪类
- a:link 正常连接的样式
- a:hover 鼠标放上去的样式
- a:active 选择链接时的样式
- a:visited 已经访问过的链接的样式
9.伪属性
- a:first-line
- a:first-letter
- a:before
- a:after
10.优先级问题
- ID>Class>HTML
- 同级时选择离元素最近的一个的
三.常用样式
1.颜色属性
- color属性定义文本的颜色
- color:green
- color:#000000
- color:#000 简写形式
- color:rgb() rgba()
2.字体属性
3.背景属性
4.文本属性
5.边框属性
6.列表属性
四.盒子模型
1.element
2.padding
3.border
4.margin
五.布局
六.单位
-
% (百分比)
-
in (英寸)
-
cm 厘米
-
mm 毫米
-
px 像素
七.CSS3
网友评论