<head>
头部元素有<title>
、<script>
、<style>
、<link>
、<meta>。
<body>
和</body>
标签之间如<h1>
、<p>
、<a>
、<img src="">
em 标签表示强调
<link href="style.css" rel="stylesheet" type="text/css" />外部css
类选择器:<style type="text/css">
.stress{
color:red;
}
</style>
id选择器:
<style type="text/css">
#stress{
color:red;
}
</style>
<span id="setGreen">公开课</span>
与类选择器不同,ID选择器只能在文档中使用一次。
子选择器,是作用于子类第一个:.food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
添加一个空格,作用于后代。
.first span{color:red;}
通用选择器:
* {color:red;}
划过显示红色:前面是标签
a:hover{
color:red;
}
CSS的某些样式是具有继承性的,比如color
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
继承的权值最低。id的最高
字体设置:body{font-family:"宋体";font-size:12px;color:#666;font-weight:bold;font-style:italic;text-decoration:underline;text-decoration:line-through;}
text-decoration:line-through;删除线,例如价格的降价
段落排版:text-indent:2em;缩进
line-height:1.5em;行高
letter-spacing:50px;字母间隔
word-spacing:50px;单词间隔
text-align:center;对齐方式
常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有: <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有: <img>、<input>
a{display:block;}转换为块状元素
display:inline;转换为内联元素
display:inline-block内联块状元素
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
内联元素特点: 1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒子模型:
单独设置下边框:
div{border-bottom:1px solid red;}
div{ border:2px solid red; }
注意: 1、border-style(边框样式)常见样式有: dashed(虚线)| dotted(点线)| solid(实线)。
2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如: border-color:#888;//前面的井号不要忘掉。
3、border-width(边框宽度)中的宽度也可以设置为: thin | medium | thick(但不是很常用),最常还是用象素(px)。
一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
填充:
上,右,下,左
div{padding:20px 10px 15px 30px;}
div{padding:10px 20px;}
上下为10px,左右为20px;
边界:
div{margin:20px 10px 15px 30px;}