<html><head><title>CSS的选择器和常用样式</title><meta charset="UTF-8"/><!--声明css代码域--><style type="text/css">/*ID选择器*/#div01{background-image: url(img/1.jpg);}/*标签选择器*//*div{background-color: bisque;}*//*类选择器*/.common{background-color: orange;}/*组合选择器*/#div01,#ta,p{border: 1px;width: 300px;height: 300px;}/*子选择器*/div>b{font-family: 萝莉体 第二版;color: red;}/*属性选择器*/input[name=uname]{color: red;}/*常用样式*/#showdiv{border: solid 1px;/*边框样式*//*大小样式*/width: 300px;height: 300px;/*字体样式*/font-size: 20px;font-family: 萝莉体 第二版;font-weight: bold;font-style: italic;color: red;/*背景颜色*/background-color: antiquewhite;/*背景图片*/background-image: url(img/1.jpg);background-size: cover;background-repeat: no-repeat;/*内容居中显示*/text-align: center;}a{text-decoration: none;}li{list-style: none;float: left;}</style></head><!--CSS的选择器:(基础选择器)ID选择器：作用：针对性给某个标签添加样式#id名{样式名:样式值;样式名:样式值;....}标签选择器：作用：给某一类型的标签添加公共样式标签名{样式名:样式值;样式名:样式值;....}类选择器作用：给不同的标签添加公共样式先声明类选择器，然后在标签上使用class属性引入类样式.类选择器名{样式名:样式值;样式名:样式值;....}(了解)组合选择器：基础选择器,基础选择器,基础选择器...{样式名:样式值;样式名:样式值;....}子选择器：基础选择器>基础选择器{样式名:样式值;样式名:样式值;....}后代选择器：基础选择器 基础选择器{样式名:样式值;样式名:样式值;....}属性选择器标签名[属性名]{样式名:样式值;样式名:样式值;....} 标签名[属性名=值]{样式名:样式值;样式名:样式值;....} css的常用样式：边框样式：border:solid 1px;border-top:样式值;border-left:样式值;border-right:样式值;border-bottom:样式值;大小样式：width:样式值height:样式值字体样式:font-size: 40px;font-family: 萝莉体 第二版;font-weight: bold;font-style: italic;color: red;背景颜色样式：background-color: antiquewhite;背景图片样式：background-image: url(img/1.jpg);background-size: cover;background-repeat: no-repeat;内容居中text-align: center;其他样式text-decoration: none; 去除超链接的下划线list-style: none;去除li标签的顺序符号float: left;左浮动--><body><h3>CSS的选择器和常用样式学习</h3><hr /><div id="showdiv">今天学习了CSS，好简单<a href="">百度一下</a><br /><ul><li>苹果</li><li>苹果</li><li>苹果</li></ul></div><br /><div id="div01">我是div01<b>哈哈</b><div id=""><b>嘿嘿</b></div></div><b>呵呵</b><div id="div02">我是div01</div><table border="1px" cellspacing="0" cellpadding="10px" class="common" id="ta"><tr><th>Header</th></tr><tr><td>Data</td></tr></table><p class="common" id="p1">我是段落</p><hr /><input type="text" id="" value="" /><input type="text" name="" id="" value="" /><input type="text" name="uname" id="" value="" /></body></html>
