ios -css

作者: DeerRun | 来源:发表于2017-06-14 14:54 被阅读129次

一、CSS样式简介

行内样式:内联样式）直接在标签的style属性中书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: aqua">
    <div style="color: blue; font-size: 18px ; background-color: antiquewhite">iiiiii</div>
    <p style="background-color: beige; font-size: 28px; border: 5px dashed azure">我是段落</p>

    <div>rongqi</div>
    <p>pppppp</p>
</body>
</html>

页内样式:在本网页的style标签中书写

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>业内样式</title>
    <style>
        div{
            color: aquamarine;
            font-size: 30px;
            border: red solid;
        }
        p{
            color: blue;
            font-size: 80px;
            background-color: azure;
        }
    </style>
</head>
<body>
    <div>rongqi</div>
    <p>pppppp</p>
</body>
</html>

外部样式:在单独的CSS文件中书写，然后在网页中用link标签引用

css

div {
    color: aquamarine;
    font-size: 30px;
    border: red dashed;
}
p{
    color: blue;
    font-size: 80px;
    background-color: azure;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link rel="stylesheet" href="./css/01-index.css">
</head>
<body>
    <div>rongqi</div>
    <p>pppppp</p>
</body>
</html>

css

二、CSS选择器

标签选择器:根据标签名找到对应的标签
类选择器:根据类名找到对应的标签
id选择器:根据id名找到对应的标签
并列选择器:用于多个标签之间有相同的样式
复合选择器:用于精准的定位
后代选择器:用于标签嵌套标签
直接后代选择器:格式: div>a
相邻兄弟选择器:格式:div+p
属性选择器:格式:div[name]
伪类:格式:div:hover
伪元素:格式:div:after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    并列选择器
    div, span{
        color: red;
     }
     标签选择器
        p{
            color: green;
        }
        类选择器
        .high{
           color: grey;
        }
        id选择器
        #main{
            color: blue;
        }
        复合选择器
        div.test {
            color: orange;
        }

        后代选择器
        div p{
            background-color: brown;
        }
        直接后代选择器
        div.test>p{
            background-color: blue;
        }
        属性选择器
        div[name]{
              color: red;
        }
        div[name="111"]{
            color: black;
        }
        伪类选择器
        input:focus {
            outline: none;
            width: 400px;
            height: 60px;
            font-size: 30px;
        }

        input:hover{
            outline: none;
            width: 200px;
            height: 30px;
            font-size: 20px;
        }

    </style>
</head>

<body>
    <div>并列选择器</div>
    <span>并列选择器</span>
    <p>标签选择器</p>
    <p class="high">类选择器</p>
    <div id="main">id选择器</div>
    <div class="test">复合选择器</div>
    <div class="test">
        <p>直接后代选择器</p>
        <div>
            <p>后代选择器</p>
        </div>
    </div>
    <div name="0000">属性选择器</div>
    <div name="111">属性选择器</div>

    <input placeholder="请输入密码"><br>
</body>
</html>

CSS选择器

三、CSS选择器的优先级别

选择器的针对性越强，它的优先级就越高
important > 内联 > id > 类 | 伪类 | 伪元素 | 属性选择 > 标签> 通配符 > 继承
选择器的权值加到一起，大的优先；如果权值相同，后定义的优先

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级别</title>
    <style>
        div{
            font-size: 20px;
            color: black;
        }
        .main{
            font-size: 10px;
            color: grey;
        }
        .test{
            font-size: 5px;
            color: blue;
        }
        *{
            font-size: 30px;
            color: green;
        }
    </style>
</head>
<body>
<div class="main test">77777</div>
</body>
</html>

结果：blue

四、HTML的标签类型

块级元素具有以下特点： ①总是在新行上开始，占据一整行； ②高度，行高以及外边距和内边距都可控制； ③宽带始终是与浏览器宽度一样，与内容无关； ④它可以容纳内联元素和其他块元素。<\div>、、<\h1>、<\h6>、<\ol>、<\ul>、<\dl>、<\table>、<\address>、<\blockquote> 、<\form>
行内元素的特点： ①和其他元素都在一行上； ②高，行高及外边距和内边距部分可改变； ③宽度只与内容有关； ④行内元素只能容纳文本或者其他行内元素,<\a>、<\span>、<\br>、<\i>、<\em>、<\strong>、<\label>、<\q>、<\var>、<\cite>、<\code>
行内-块级标签:多个行内-块级标签可以显示在同一行,能随时设置宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        #test1 {
            display: inline;
        }
        #test2 {
            display: inline-block;
            color: orangered;
        }
        #test3 {
            display: block;
        }
    </style>
</head>
<body>
<!--行内-->
    <div id="test1">000000</div>
    <div id="test1">111111</div>

<!--行内-块级-->
    <div id="test2">
        222222
        <div>3333</div>
        <div>4444</div>
    </div>
    <div id="test2">333333</div>
<!--块-->
    <input type="text" placeholder="44444" id="test3">
    <input type="text" placeholder="55555" id="test3">
</body>
</html>

display

五、CSS属性

可继承属性:父标签的属性值会传递给子标签,一般是文字控制属性
不可继承属性:父标签的属性值不能传递给子标签,一般是区块控制属性

六、盒子模型

内容(content)
填充(padding) :上左下右或 (上下)(左右)
边框(border）：border-width(边框宽度) border-style(边框样式) border-color(边框颜色)
边界(margin)：上左下右或 (上下)(左右)
RGBA透明度
块阴影与文字阴影：box-shadow，text-shadow
*圆角：border-radius
形变：transform transform-origin transition

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        *{
            margin: 0px;
        }

        div{
            width: 300px;
            height: 300px;

            padding: 10px 20px 30px 40px;
            border:10px solid;
            margin: 20px 60px 40px 100px;

            background-color: rgba(255,0,0,0.5);
            display: inline-block;
            border-radius: 20px;

            box-shadow: 10px 20px 10px green;
            text-shadow: 10px 20px 1px green;
        }
    </style>
</head>
<body>
    <div>这是一个盒子!></div>
</body>
</html>

盒子

七、标签的居中

水平居中:
行内标签行内-块级标签text-align:center
块级标签 margin:0 auto
垂直居中 line-height == height
定位
父position:relative 子position:absolute
top:50%;left:50%;
transform:translate(-50%, -50%)

居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>

        #test0 {
            background-color: red;
            width: 600px;
            height: 200px;
            /*块级标签水平居中*/
            margin: 0 auto;
            /*块级标签行内居中*/
            text-align: center;
        }
        /*行内*/
        #test1 {
            display: inline;
            background-color: orange;
            text-align: center;

            /*行内标签设置高度和宽度无效,高度和宽度根据内容而定*/
            width: 200px;
            height: 100px;
        }
        /*行内-块级标签*/
        #test2 {
            display: inline-block;
            color: orangered;
            background-color: orange;

            /*行内-块级标签设置高度和宽度无效,高度和宽度根据内容而定*/
            width: 200px;
            height: 100px;
        }

        /*块级标签*/
        #test3 {
            display: block;
            margin: 0 auto;
            background-color: orange;
        }

        /*块级标签*/
        #test4 {
            /*标签水平居中*/
            margin: 0 auto;
            /*内容水平居中*/
            text-align: center;
            width: 200px;
            height: 200px;
            background-color: #2b669a;
            /*垂直居中*/
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div id="test0">
        <!--行内-->
        <div id="test1">test1-a</div>
        <div id="test1">test1-b</div>

        <!--行内-块级-->
        <div id="test2">
            test2-a
            <div>test2-b</div>
            <div>test2-c</div>
        </div>
        <div id="test2">test2-d</div>
    </div>

    <!--块-->
    <input type="text" placeholder="test3-a" id="test3">
    <input type="text" placeholder="test-b" id="test3">

    <div id="test4">test4</div>
</body>
</html>

居中

定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style>
        #test1 {
            width: 300px;
            height: 200px;

            background-color: grey;
            /*相对距离*/
            position: relative;

            margin: 60px 140px;
        }
        .test2 {
            width: 200px;
            height: 100px;

            background-color: red;
            /*绝对距离*/
            position: absolute;
            /*相对父类test1的距离*/
            left: 30px;
            top: 70px;
        }
    </style>
</head>
<body>

    <div id="test1">
        test1
        <div class="test2">test2</div>
    </div>
</body>
</html>

CSS布局

1.1 标准流布局

所有网页都在标准流的布局中
从上到下,从左到右

1.2 脱离标准流布局

float:
作用:让子标签浮动在父标签的左边和右边
用途:常用于列表的左浮和右浮

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Float浮动-脱离标准流</title>
    <!--
      注意:
      任何标签只要一浮动,类型就会被转为行内-块级标签
    -->
    <style>
        #main{
            background-color: red;
            width: 500px;
            height: 200px;
        }

        .test1{
            background-color: blue;
            /*浮动*/
            float: left;
            width: 30px;
            height: 60px;
        }

        .test2{
            background-color: yellow;
            float: right;
        }

        .test3{
            background-color: purple;
        }
    </style>
</head>
<body>
   <div id="main">
       <div class="test1">1</div>
       <div class="test2">2</div>
       <div class="test3">3</div>
   </div>
</body>
</html>

float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见标签</title>
</head>
<body>
    <div style="border:4px solid blue;">
        blue
    </div>
    <div style="border:4px solid red;float:left;">
        red-left
    </div>
    <div  style="border:4px solid orange; display: inline-block">
        without-left
    </div>
    <div style="border:4px solid black; float: right">
        black-right
    </div>

    <br>
    <br>
    <br>
    <hr>
    <br>

    <div style="border:4px solid blue;">
        ![](voucher_red_right.png)
    </div>
    <div style = "border : 4px solid red; width: 400px; height: 400px">
        <img style = "border:4px solid yellow; float:left;" src = "voucher_orange_right.png">
        外层div没有了浮动，因此红色边框宽度默认是100%全屏。其内容img由于加上了float，使得该img具有了欺骗性。float给img施了个障眼法，让该img的inline-height高度塌陷为0了。这样外层div计算高度时，认为img的高度为0，相当于div的content的高度为0，因此红色边框看起来是一条直线。但请注意障眼法毕竟是障眼法，并不是真的让img的高度塌陷为0了，可以看到上图中img的黄色边框还是有正常高度的。如果给div里加点文字，效果如下：可以看到，外层div在没有手动设定height的前提下，其高度是由内部content的最大高度决定的，由于img的float使得img具有高度塌陷的欺骗性，让div误以为img的line-height为0，因此div的高度就是文字的匿名inline-box的inline-height。
    </div>

</body>
</html>

float

position结合top left right bottom
作用:让子标签在父标签的任意位置进行定位
规则:子绝父相,常用属性:absolute relative fixed

1.3 注意事项

任何一个标签,只要脱离标准流布局,标签的类型就被转化为行内-块级标签

ios -css

一、CSS样式简介

二、CSS选择器

三、CSS选择器的优先级别

四、HTML的标签类型

五、CSS属性

六、盒子模型

七、标签的居中

CSS布局

1.1 标准流布局

1.2 脱离标准流布局

1.3 注意事项

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读