我的css笔记
1.css的使用方法
内嵌样式
<p style="font-size:20pt;color:red;">这个Style定义<p>
<!--里面的文字是20pt字体，字体颜色是红色。 -->内部样式表
<HTML>
<HEAD>
<STYLE type="text/css">
H1.mylayout {
border-width:1;
border:solid;
text-align:center;
color:red;}
</STYLE>
</HEAD>
<BODY>
<H1 class="mylayout"> 这个标题使用了Style。</H1>
<H1>这个标题没有使用Style。</H1>
</BODY>
</HTML>外部样式表
首先建个style.css文件，内容如下：
H1.mylayout {
border-width: 1;
border: solid;
text-align:center;
color:red
} 再建个网页：
<HTML>
<HEAD>
<link href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<H1 class="mylayout"> 这个标题使用了Style。</H1>
<H1>这个标题没有使用Style。</H1>
</BODY>
</HTML> 2.样式的优先级（高到低）
- 内嵌样式表(Inline Style)
- 内部样式表(Internal Style Sheet)
- 外部样式表(Extenal Style Sheet)
- 浏览器缺省(browser default)
3.基本语法
选择器(Selector)
1.元素选择器
p {color:blue;}
/*多个属性用分号隔开*/
p{
text-align:center；
color:red；
}
/*相同的属性值赋给多个Selector*/
h1,h2,h3,h4,h5,h6 {color:red;} 2.类选择器
/*同样的Tag构成不同的样式*/
.right {text-align:right;}
.center {text-align:center;}3.ID 选择器
#id {color:red;}
/*id 选择器+派生选择器*/
#id p {color:red;}
/*div元素下id 选择器*/
div#id {color:red;}4.属性选择器
[id] {color:blue；}
[title=“W3School”]{color:blue；}
a[href][title] {color:red;}
img[title~="Figure"] {border: 1px solid gray;}CSS注释
/* CSS注释 */ 注意事项
- CSS 对大小写不敏感，但涉及到 HTML 中的class 和 id 时需要区分
- CSS中子元素从父元素继承属性
3.CSS属性
字体属性
font-family(字体)
font-size
font-style(斜体 normal, italic, oblique )
font-weight(粗细体normal, bold )
font-variant(小的大写normal, small-caps )
font(综合属性font-size, font-style, font-weight, font-variant)
文本属性
color（文本颜色）
direction（文本方向）
text-align (left(缺省值), right ,center, justify (两端) )
text-decoration (划线none(缺省值), underline, overline, line-through)
text-indent (首行缩进length, percentage (相当于父对象宽度的百分比) )
line-height (行高normal(缺省值), length, percentage )
letter-spacing(字间距normal(缺省值), length )
背景属性
background-color
background-image
background-size
background-repeat(与image结合使用repeat-x, repeat-y, no-repeat )
background-attachment (背景附着scroll, fixed )
background-position (与image结合使用)
background (background-color, background-image, background-repeat, background-attachment, background-position )
边框属性
1.border-style用来设定上下左右边框的风格：
none (没有边框，无论边框宽度设为多大)
dotted (点线式边框)
dashed (破折线式边框)
solid (直线式边框)
double (双线式边框)
groove (槽线式边框)
ridge(脊线式边框)
inset (内嵌效果的边框)
outset (突起效果的边框)
2. border-width用来设定上下左右边框的宽度：
medium (是缺省值)
thin (比medium细)
thick (比medium粗)
length
3. border-color
4. border 它包含border-width, border-style和border-color
外边距属性
margin-left
margin-right
margin-top
margin-bottom
margin(顺序是上，右，下，左)
内边距属性
padding-left
padding-right
padding-top
padding-bottom
padding(顺序是上，右，下，左)
列表样式属性
1. list-style-type
disc (缺省值，黑圆点)
circle (空心圆点)
square (小黑方块)
decimal (数字排序)
lower-roman (小写罗马字排序)
upper-roman (大写罗马字排序)
lower-alpha (小写字母排序)
upper-alpha (大写字母排序)
none (无列表项标记)
2. list-style-position
outside (以列表项内容为准对齐)
inside (以列表项标记为准对齐)
3. list-style-image
4. list-style(综合list-style-type, list-style-position, list-style-image)
链接
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */下划线
a:link {text-decoration:none;}
a:hover {text-decoration:underline;}背景色
a:link {background-color:#B2FF99;}
a:hover {background-color:#FF704D;}