首页 > 其他分享> 文章详细

CSS

2019-04-10 14:53:23 阅读：145 来源： 互联网

标签：Title color 标签 height background 选择器 CSS

一. CSS：

1. 在标签上设置style属性：

background-color: #FFA000;

height: 48px;

2. 写在head里面，style标签中写样式：

CSS选择器

（1）id选择区：(用的少，了解）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color:#FFA000;
            height:48px;
            /*样式复用*/
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i1"></div>
    <div id="i1"></div>
     /*但是id不能重复，矛盾了，怎么办*/
</body>

（2）class选择器：（推荐使用）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color:#FFA000;
            height:48px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c1"></div>
    <div class="c1"></div>
</body>

　　注：注释：（/* */）

(3)标签选择器：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{           
            background-color:#FFA000;
            height:48px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c1"></div>
    <div class="c1"></div>
</body>

注：所有的div都用了定义的格式

(4) 关联选择器：（层级）

只有span下的div应用了格式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span div{
            background-color:#FFA000;
            height:48px;
        }
    </style>
</head>
<body>
    <div class="c1">lasi</div>
    <span class="c1">
        <div>
            zhangsan
        </div>
    </span>                  
    <div class="c1">wagnmazi</div>
</body>

　　（5）层级选择器：空格

.c1 span a p{ } : .c1下的span下的a下的p标签，各级标签之间用空格。

（6）组合选择器：逗号

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color:#FFA000;
            height:48px;
            /*样式复用*/
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2"></div>
    <div id="i3"></div>
</body>

　　（7）属性选择器

对选择到的标签在通过属性进行一次筛选。

ps:优先级：标签上style优先，其次按代码编写顺序；

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #FFA000;
            color: red;
        }
        .c2{
            font-size: 28px;
            color: black;
        }
    </style>
</head>
<body>
<div class="c1 c2" >zhagnsan</div>
</body>

　　补充：css样式也可以写在单独的文件中，提高复用性（优先级同上）

3.注释

4.边框
宽度，样式，颜色，上下左右（每个属性之间用分号隔开）：

height：高度（数字，百分比（单独使用时无用））

width：宽度（宽度，百分比）

line-height自适应居中（垂直方向根据div大小居中）:

text-align:center :水平方向居中

color:颜色

font-size:字体大小

font-weight:字体加粗

  <div style="border:1px solid red;" >zhagnsan</div>

  <div style="border-bottom:1px solid red;" >zhagnsan</div>

5.背景

6. float（****重点***）

让标签浪起来，块级标签也可以堆叠：

代码见CSS中s6>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height:38px;
            background-color: #dddddd;
            /*灰色*/
            line-height: 38px;
        }
    </style>
</head>
<body style="margin: 0 auto">
    <div class="pg-header">
        <div style="float: left;">收藏本站</div>
        <div style="float: right;">
            <a>登陆</a>
            <a>注册</a>
            <a>搜索</a>
        </div>
    </div>
    <div style="width:300px;border: 1px solid red;">
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">1</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">2</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">3</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">4</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">5</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">6</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">7</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">8</div>
        <div style="clear: both;"></div>
        <!--父子（红色边框）与儿子（绿色边框）的边框不冲突，注意这个坑-->
        <!--div中可以嵌套div，里面的儿子可以飘（float）起来，飘起来之后，老子就管不住了，可以内部最后用<div style="clear: both;"></div>去调整；-->
    </div>
</body>
</html>

示例2：

<body>
     <div style="width: 20%;background-color: red;float: left">zhangsan</div>
     <div style="width:60%;background-color: green;float: left">xiaolaizi </div>
</body>

效果如下：

7.display 用的也较多

块级转行内，行内转块级标签

display:inline; 块级转行内

display:block; 内联变块级

display:none; 让标签消失

注：行内标签无法设置高度，宽度，padding margin;

那么可以做一些结合：

display:inline-block; 具有inline属性，默认自己有多少占多少，

又具有block属性，可以设置无法设置高度，宽度，padding，margin

转前：

<body>
     <div style="background-color: red;">ziyu</div>          #div默认块级标签
     <span style="background-color: blue;">xiaolaizi</span>  #span默认行内标签
</body>

效果：

转后：

<body>
     <div style="background-color: red;display: inline">ziyu</div>
     <span style="background-color: blue;display: block">xiaolaizi</span>
</body>

效果：

8.padding margin(0,auto) 边距

内边距：padding

外边距： margin

9.text-align

10.height width line-height color font-size font-weight

==================================================================

小结：

1. CSS重用

同一行有多种样式：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{

        }
        .c2{

        }
    </style>
</head>
<body>
    <div class="c1 c2"></div>
     <!--同一行有多种样式-->
</body>

2. 改变大小变形

（1）左右滚动条的出现

（2）宽度的设置有两种：数字px

百分比

解决：在页面最外层设置像素的宽度=>最外层设置绝对宽度

3. 自适应

media属性

4.img默认标签，有一个1px的边框

解决：设置border为0即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            border:0;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">
        <img src="1.jpg" style="width:200px;height: 300px;"/>
    </a>
     <!--用谷歌打开没问题，用ie打开出现蓝色的边框（ie浏览器会出现的问题)，加border可以解决-->
        <!--<style>-->
        <!--img{-->
            <!--border:0;-->
        <!--}-->
    <!--</style>-->

</body>
</html>

标签：Title,color,标签,height,background,选择器,CSS
来源： https://www.cnblogs.com/bltstop/p/10651676.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS