css的引用和css选择器 - HTML 5 & css3

首页 > 博客列表 > css的引用和css选择器

博主信息

博文 26

粉丝 0

访问量 23266

专题推荐

更多>

1. 实例演示css规则的三种引入到html文档中的方式;

答：
行内样式：通过选择器的style属性来设置：

<h3   style="color:red;background-color:cyan;">通过选择器的style属性来设置</h3>

内部样式（嵌入样式）：写在head标签间的style标签中，仅对当前页面有效：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    h3{
        background-color:linen;
        color:navy;
        font-size: 24px;
        line-height: 35px;
        text-decoration:line-through;
    }
    </style>
</head>
<body>
<h3>此价格已经取消</h3>
</body>
</html>

效果:

引入外部样式：这样样式可以共享；
css.css:

*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
    background-color:steelblue
}
.login{
    position:absolute;
    width:300px;
    border:1px  solid  #ccc;
    top:50%;
    margin-top:-71px;
    left:50%;
    margin-left:-150px;
    font-size: 14px;
    text-align: left;
    text-indent:40px;
    height: 142px;
    border-radius: 6px;
    box-shadow:1px 1px  15px #ccc;
    background-color: #fff;
}
.login   form p{
    line-height:35px;
    word-spacing:10px;
}
.login   form  p  input{
    width:150px;
}
.login   form  p  input[name="useryzm"]{
    width:50px;
}
.login   form  p:nth-of-type(4){
    text-indent:120px;
}
.login   form  p  button{
 width:80px;
}
.login   form  p  span{
    line-height:25px;
    background-color: #ccc;
    margin-left: 3px;
    vertical-align:1px;
    word-spacing: 20px;
   }

outcss.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/css.css"    />
</head>
<body>
<div  class="login">
<form action="">
<p><label for="username">用户名：</label><input type="text" name="username"   id="username"    value=""   /></p>
<p><label for="userpwd">密&nbsp;码：</label><input type="password" name="userpwd"   id="userpwd"    value=""   /></p>
<p><label for="useryzm">验证码：</label><input type="text" name="useryzm"   id="useryzm"    value=""   /><span>123456</span></p>
<p><button>登陆</button></p>
</form>
</div
</body>
</html>

效果：

在style标签或者css文件中使用inmport引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style  type="text/css">
    @import url(css/css.css);
    </style>
</head>
<body>
<div  class="login">
<form action="">
<p><label for="username">用户名：</label><input type="text" name="username"   id="username"    value=""   /></p>
<p><label for="userpwd">密&nbsp;码：</label><input type="password" name="userpwd"   id="userpwd"    value=""   /></p>
<p><label for="useryzm">验证码：</label><input type="text" name="useryzm"   id="useryzm"    value=""   /><span>123456</span></p>
<p><button>登陆</button></p>
</form>
</div
</body>
</html>

效果：

2. 实例演示标签选择器，class选择器,id选择器,上下文选择器，结构伪类选择器，重点是结构伪类选择器

答案：

标签选择器，class选择器,id选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
/* 标签选择器： */
p{
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
height:35px;
line-height: 35px;
border:1px  solid red;
box-sizing: border-box;
}
a{
    color:red;
}
a:link{
    color:blueviolet;
}
a:visited{
color:chartreuse;
}
a:hover{
    color:mediumblue;
}
a:active{
    color:teal;
}
.title{
    color:red;
}
/* id主要是为js服务的，故需要人为保持唯一性 */
#id1{
    color:cyan
}
</style>
<body>
<P>p标签选择器</P>
<a   href="">百度</a>
<h3   class="title">h3.title文章标题</h3>
<p id="id1">id选择器</p>
<script>
document.querySelector("a").addEventListener('click',show);
function show(ev){
    ev.preventDefault();
}
</script>
</body>
</html>

效果：

标签选择器，class选择器,id选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下文选择器</title>
</head>
<style>
 /* 只是直系子元素 */
 div.ft div{
    width:300px;
    float: left;
    margin-left: 12px;
    background-color: oldlace;
}
div>ul>li{
    width:100%;
    border-bottom:1px  solid red;
    list-style: none;
    font-size:14px;
    line-height: 30px;
}
/* 后台选择器： */
div  ul  li{
    width:100%;
    border-bottom:1px  solid red;
    list-style: none;
    font-size:14px;
    line-height: 30px;
}
div.add{
width:300px;
}
div.add p+p{
    background-color: orangered;
}
div.ft{
    overflow:hidden;
}
div.test{
    width:500px;
    background-color:orangered;
}
div.test   h3 ~ p{
    background-color:navy;
    color:orangered;
}
</style>
<body>
<div  class="ft">
    <div>
        <h3>div>ul>li:</h3>
        <ul>
            <li>测试信息1子元素</li>
            <li>测试信息2子元素</li>
            <li>测试信息3子元素</li>
        <ul>
            <li>测试信息孙子元素</li>
        </ul>
        </ul>
    </div>
    <div>
    <h3>div  ul  li:</h3>
    <ul>
        <li>测试信息1子元素</li>
        <li>测试信息2子元素</li>
        <li>测试信息3子元素</li>
    <ul>
        <li>测试信息孙子元素</li>
    </ul>
    </ul>
</div>
<div  class="add">
<h3>相邻选择符号E+F:选择紧贴在E元素之后F元素</h3>
<p>选择符号一</p><p>选择符号</p><h4>间隔一个</h4><p>间隔一个元素的p</p>
</div>
</div>
<div  class="test">
 <h3>兄弟选择符(E~F):选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。</h3>
 <p>p兄弟选择符(E~F)</p>
 <h3>h4兄弟选择符(E~F)</h3> 
 <p>p兄弟选择符(E~F)</p> 
 <p>p兄弟选择符(E~F)</p> 
</div>
</body>
</html>

效果：

结构伪类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style  type="text/css">
/* 常用伪类 */
/* 所有的子元素li */
ul  li{
    list-style: none;
}
/* ul的第一个子元素li */
ul  li:first-child{
    color:red;
}
/* ul的最后一个子元素li */
ul  li:last-child{
    color:cyan;
}
/* ul的第二个子元素li */
ul  li:nth-child(2){
color:chartreuse;
}
/* ul的倒数第二个子元素li */
ul  li:nth-last-child(2){
color:chartreuse;
}
/* 匹配dl中第一个同级元素  n从1开始*/
dl  dd:first-of-type{
    color:red;
}
/* 匹配dl中最后一个同级元素dt */
dl  dt:last-of-type{
    color:red;
}
/* dl  dt:last-of-type{
    color:red;
} */
/* 匹配dl中唯一的同级元素h3 */
dl  h3:only-of-type{
    color:red;
}
/* 匹配dl中第二个同级元素dd,如果不是dd则无效 */
dl  dd:nth-of-type(2) { 
   color:darkblue;
}
/* 匹配dl中倒数第二个同级元素dd,如果不是dd则无效 */
dl  dd:nth-last-of-type(2){
    color:darkblue;
}
/* //n从1开始  偶数行*/
div.n1 p:nth-of-type(2n){
color:red;
}
/* //n从1开始  奇数行*/
div.n2 p:nth-of-type(2n+1){
color:darkblue;
}
/* //从零开始 */
div.n3 p:nth-of-type(odd){
color:red;
}
div.n4 p:nth-of-type(even){
color:darkgreen;
}
</style>
<body>
<ul>
<li>111</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul> 
<dl>
<dt>今晚今晚要唱到爆炸</dt>
<dd>今晚今晚要唱到爆炸</dd>
<dt>今晚今晚要唱到爆炸</dt>
<dd>今晚今晚要唱到爆炸</dd>
<dt>今晚今晚要唱到爆炸</dt>
<dd>今晚今晚要唱到爆炸</dd>
<h3>唯一同级元素</h3>
</dl>
<h3>2n(n=1,2,3,...)</h3>
<div   class="n1">
<p>奇偶数选择</p>
<p>奇偶数选择</p>
<p>奇偶数选择</p>
</div>
<h3>2n+1(n=1,2,3,...)</h3>
<div   class="n2">
    <p>奇偶数选择</p>
    <p>奇偶数选择</p>
    <p>奇偶数选择</p>
    </div>
    <h3>odd</h3>
    <div   class="n3">
        <p>奇偶数选择</p>
        <p>奇偶数选择</p>
        <p>奇偶数选择</p>
    </div>
        <h3>even</h3>
        <div   class="n4">
            <p>奇偶数选择</p>
            <p>奇偶数选择</p>
            <p>奇偶数选择</p>
        </div>
</body>
</html>

效果：

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0104作业

2021-01-11 00:12:57

1. 实例演示css规则的三种引入到html文档中的方式;

2. 实例演示标签选择器，class选择器,id选择器,上下文选择器， 结构伪类选择器，重点是结构伪类选择器

标签选择器，class选择器,id选择器：

标签选择器，class选择器,id选择器：

结构伪类选择器：

2. 实例演示标签选择器，class选择器,id选择器,上下文选择器，结构伪类选择器，重点是结构伪类选择器