目录
一、css的简单了解
我们写 css 的地方是 style 标签，就是“样式”的意思，写在 head 里面。 type 表示“类型” ， text 就是“纯文本”。css 也是纯文本的。css 对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。
css
不难，最重要的是把属性给记忆准确。
二、常见属性
1.字体颜色 color
color
属性的值，可以是英语单词，比如
red
、
blue
、
yellow
等等；也可以是
rgb或者
十六进制，
2.字体大小 font-size
font
就是“字体”，
size
就是“尺寸”。
px
是“像素”。 单位必须加噢，不加没有效果呢。
3.背景颜色 background-color
background
就是“背景” 顾名思义color就是颜色。
4.字体加粗 font-weight
font
是“字体”
weight 是“重量”的意思，font-weight: bold； 加粗，font-weight: normal；正常 。
5.字体样式 font-style
font-style: italic; 斜体 font-style: normal; 正常。
6.下划线
text-decoration: underline;
三、基础选择器
1. 标签选择器
所有的标签，都可以是选择器。比如h1、ul、li
、
label
、
dt
、
dl
、
input
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”的。
<h1>我是h1标签</h1>
//style中为h1标签的样式
<style type="text/css">
h1{
color:red;
font-size:12px;
}
</style>2. id选择器
id 选择器的选择符是“#”
。 任何的 HTML
标签都可以有
id
属性。表示这个标签的名字。
<p>我是段落 1</p>
<p id="para2">我是段落 2</p>
<p>我是段落 3</p>
<style type="text/css">
#para2{
color:red;
font-size:12px;
}
</style>注意：这个标签的名字，可以任取，但是：
1
） 只能有字母、数字、下划线，
2） 必须以字母开头，
3
） 不能和标签同名。比如
id
不能叫做
body
、
img
、
a。
一个
HTML
页面，不能出现相同的
id。
3. 类选择器
.就是类的符号。
类的英语叫做
class
。 所谓的类，就是 class
属性，
class
属性和
id
非常相似，
任何的标签都可以携带
class
属性
。
class
属性可以重复
<h3>我是一个 h3 啊</h3>
<h3 class="teshu">我是一个 h3 啊</h3>
<h3>我是一个 h3 啊</h3>
<p>我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>
<style type="text/css">
.teshu{
color: red;
}
</style>
//同一个标签，可能同时属于多个类，用空格隔开,这样，这个 h3 就同时属于 teshu 类，也同时属于 zhongyao 类
<h3 class="teshu zhongyao">我是一个 h3 啊</h3>注意：
1
）
class
可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
2
） 同一个标签可以同时携带多个类。
四、高级选择器
1. 后代选择器
空格就表示后代
，
.div1 p
就是
.div1
的后代所有的
p
。
<div class="div1">
<ul>
<li>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</li>
</ul>
</div>
//选择的是所有.div1中的p
<style type="text/css">
.div1 p{
color:red;
}
</style>2. 交集选择器
交集选择器没有空格用.分隔
，选择的元素必须同时满足两个条件。如：div.red
3. 并集选择器
用逗号就表示并集
。如：div,red
4. 通配符*
*
就表示所有元素。
如果页面上的标签越多，效率越低，所以页面上一般不会出现这个选择器。
如果不考虑兼容问题还有 儿子选择器，序选择器，下一个兄弟选择器等等。
五、选择器兼容性
下列都是 IE6 兼容的选择器：
p
#box
.spec
div.box
div .box
div , .box
*下列都是 IE7 开始兼容：
div>p
div+p下列都是 IE8 开始兼容：
div p:first-child
div p:last-child冰墩墩代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用css来画冰墩墩</title> <style> *{ margin: 0; padding: 0; } .m_body{ width: 362px; height: 410px; border: #393939 8px solid; border-radius: 88% 88% 62% 68% /82% 82% 95% 84%; margin: 50px auto; position: absolute; left: 109px; top: -30px; background: #ffffff; } .ear1, .ear2{ background: #393939; width: 81px; height: 115px; border-radius: 50%; position: absolute; z-index: -1; } .ear1{ left: 123px; top: 26px; transform: rotate(10deg); } .ear2{ left: 390px; top: 30px; transform: rotate(10deg); } .eye1, .eye2{ background: #393939; width: 83px; height: 115px; border-radius: 50%; position: absolute; } .eye1{ left: 185px; top: 112px; transform: rotate(45deg); } .eye2{ left: 329px; top: 112px; transform: rotate(-45deg); } .eye1:before, .eye2:before{ content: ""; width: 40px; height: 40px; border:#fff 5px solid; border-radius: 100%; position: absolute; } .eye1:before{ right: 10px; top: 22px; } .eye2:before{ left: 10px; top: 22px; } .eye1:after, .eye2:after{ content: ""; width: 10px; height: 10px; background: #9b9b9b; border-radius: 100%; position: absolute; } .eye1:after{ right: 27px; top: 31px; } .eye2:after{ left: 41px; top: 44px; } .face{ position: absolute; border-radius: 48% 48% 44% 49% /53% 54% 45% 47%; } .c_blue{ border:#6bcdf3 5px solid; width: 280px; height: 224px; left: 150px; top: 78px; } .c_red{ border:#af2350 5px solid; width: 287px; height: 233px; left: 146px; top: 73px; } .c_purple{ border:#3e6ce4 5px solid; width: 305px; height: 248px; left: 137px; top:65px ; } .c_yellow{ border:#7fcb58 5px solid; width: 313px; height: 256px; left: 133px; top:61px ; } .c_green{ border:#008000 5px solid; width: 294px; height: 242px; left: 142px; top: 68px; } .arm1, .arm2{ background: #333; position: absolute; z-index:-1; } .arm1{ width: 75px; height: 118px; left: 64px; top: 244px; transform: rotate(45deg); border-radius: 24% 69% 68% 76% / 53% 95% 40% 52% ; } .arm2{ width: 75px; height: 148px; left: 463px; top: 162px; transform:rotate(37deg); border-radius: 56% 62% 98% 6% /40% 46% 80% 58%; } .arm2:before{ content: ""; width: 16px; height: 24px; background: #bc242c; position: absolute; border-top-left-radius: 50%; border-top-right-radius:50%; transform: rotate(45deg); left: 32px; top: 20px; } .arm2:after{ content: ""; width: 16px; height: 24px; background: #bc242c; position: absolute; border-top-left-radius: 50%; border-top-right-radius:50%; transform: rotate(-45deg); left: 26px; top: 20px; } .arm_c{ content: ""; width: 16px; height: 24px; position: absolute; left: 426px; top: 20px; } .nose{ background: #333333; } .nose:before, .nose:after{ content: ""; position: absolute; background-color: inherit; } .nose, .nose:before, .nose:after{ width: 28px; height: 18px; border-radius: 42px 42px 60px 61px /30px 30px 50px 46px; } .nose{ position: absolute; left: 283px; top:187px; } .mouse{ position:absolute; left: 265px; top: 205px; width: 68px; height: 25px; border-radius: 48%; border:#393939 7px solid; border-top: none; border-left: 0; border-right: 0; } .leg1, .leg2{ background: #333; position: absolute; width: 83px; height: 80px; border-radius: 0 0 30px 30px ; z-index: -1; } .leg1{ left: 187px; top: 423px; } .leg2{ left: 328px; top: 423px; } .leg1:after{ content: ""; width: 43px; height: 30px; position: absolute; background: #333333; border-radius: 30px; bottom: 0; right: -3px; } .leg2:after{ content: ""; width: 43px; height: 30px; position: absolute; background: #333333; border-radius: 30px; bottom: 0; right: -3px; } </style> </head> <body> <div class="m_body"></div> <div class="ear1"></div> <div class="ear2"></div> <div class="eye1"></div> <div class="eye2"></div> <div class="face c_blue"></div> <div class="face c_red"></div> <div class="face c_green"></div> <div class="face c_purple"></div> <div class="face c_yellow"></div> <div class="arm1"></div> <div class="arm2"></div> <div class="nose"></div> <div class="mouse"></div> <div class="leg1"></div> <div class="leg2"></div> </body> </html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。