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

Home > List of blog posts > css的引用和css选择器

Blogger Information

Blog 26

fans 0

comment 3

visits 17763

Special Recommendation

More>

Related recommendations

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>

效果：

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

0104作业

2021-01-11 00:12:57

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

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

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

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

结构伪类选择器：

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