码迷,mamicode.com
首页 > Web开发 > 详细

HTML、CSS基础知识(三)

时间:2018-06-23 18:57:41      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:htm   接下来   src   pre   ack   选择   基础知识   编写   没有   

 1、CSS样式

方式一:在head标签中增加style标签,在style标签中写CSS样式

方式二:在body中,直接在使用的标签中增加style属性,进行CSS编写

方式三:通过link标签引入写好的CSS样式表

<link rel="stylesheet" href="xx.css">

接下来讲的都是方式一

2、ID选择器

ID选择器以#号来定位,所以在style标签中写样式时,要以#开头,一个HTML页面不可以存在相同的id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        #i1{
            height: 100px;
            width:100px;
            background: red;
        }
    </style>
</head>
<body>
   <!--id选择器,以#来定位 一个html页面不可以存在相同id-->
    <div id="i1"></div>
</body>
</html>

上面这段代码通过ID选择器定位到了i1这个CSS样式,对整个div进行了CSS样式附着,浏览器显示一个100*100的红色背景的方框:

技术分享图片

3、class选择器

class选择器以.定位,一个HTML页面中可以存在相同的class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        .c1{
            height: 100px;
            width:100px;
            background: blue;
        }
    </style>
</head>
<body>
   <!--class选择器,以.来定位,一个html页面不可以存在相同class-->
    <div class="c1"></div>
</body>
</html>

上面这段代码通过class选择器定位到了c1这个CSS样式,对整个div进行了CSS样式附着,浏览器显示一个100*100的蓝色背景的方框:

技术分享图片

4、标签选择器

通过标签名定位查找

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        div{
            height: 100px;
            width:100px;
            background: pink;
        }
    </style>
</head>
<body>
    <!--标签选择器 当前html页面div都会受到影响-->
    <div></div>
    <div>ashd</div>
</body>
</html>

 

面这段代码通过div标签选择器找到这个CSS样式,对整个div进行了CSS样式附着,整个HTML页面的所有div都要受影响。浏览器显示一个两个100*100的粉色背景的方框:

技术分享图片

5、标签层级选择器

 如果我们要给div标签中的一个span标签的内容进行样式附着,那么我们就需要用到标签层级选择器
标签层级选择器写的时候,各层级标签用空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        div span{
            height: 100px;
            width:100px;
            background: pink;
        }
    </style>
</head>
<body>
   <!--标签层级选择器-->
    <div>
        <span>大师兄</span>
        <span>测试</span>
    </div>
    <div>
        <span>测试1</span>
    </div>
    <span>测试3</span>
</body>
</html>

div下所有span标签的内容都使用这个css样式,但是非div层级下的span标签不会使用这个样式,浏览器显示,如图所示,只有测试3这个内容不会使用这个样式:

技术分享图片

 6、class层级选择器

通过class标签选择器定位第一级,再通过层级选择器定位第二层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        .c2 span{
            background: pink;
        }
    </style>
</head>
<body>
   <!--class层级选择器-->
    <div class="c2">
        <span>测试</span>
    </div>
</body>
</html>

 

因为span标签是行内标签,所以设置宽和高也没有什么用,所以上面这段代码里的样式就没加宽和高,界面显示如下:

技术分享图片

 

7、id层级选择器

 通过ID标签选择器定位第一层,在通过层级选择器定位第二层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        #i2 span{
            background: pink;
        }
    </style>
</head>
<body>
   <!--id层级选择器-->
    <div id="i2">
        <span>测试</span>
    </div>
</body>
</html>

界面显示与6的class层级选择器相同

8、ID组合选择器

ID组合选择器,应用于以id选择器进行css样式设置的,可以通过id i3 i4 i5 共用一套css样式 组合 通过逗号间隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        #i3,#i4,#i5{
            height: 100px;
            width: 100px;
            background: pink;
        }
    </style>
</head>
<body>
   <div id="i3"></div><br>
    <div id="i4"></div><br>
    <div id="i5"></div>
</body>
</html>

界面显示三个并列的100*100的粉色背景框。

 

9、class组合选择器

class组合选择器,应用于以class选择器进行css样式设置的,可以通过class c3 c4 c5 共用一套css样式 组合 通过逗号间隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        .c3,.c4,.c5{
            height: 100px;
            width: 100px;
            background: pink;
        }
    </style>
</head>
<body>
       <div class="c3"></div><br>
    <div class="c4"></div><br>
    <div class="c5"></div>
</body>
</html>

界面显示与ID组合选择器的一样

10、属性选择器

 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
       div[name=‘dsx‘]{
            background-color: #00c2c9;
        }
    </style>
</head>
<body>
    <div name="dsx">测试中</div>
</body>
</html>

以上代码时为div中的name属性附着样式,因为未设置宽和高,div又是块级标签,所以会背景颜色会占满整行,界面显示如下:

技术分享图片

 

HTML、CSS基础知识(三)

标签:htm   接下来   src   pre   ack   选择   基础知识   编写   没有   

原文地址:https://www.cnblogs.com/emilyliu/p/9206691.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!