css识别 ios系统 test.css

转载

mob64ca1409d8ea 2024-01-26 08:33:56

文章标签 css识别 ios系统 html CSS 选择器 文章分类 iOS 移动开发

01.CSS引用方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css引用方式</title>
    <!--3.引入外部样式文件-->
    <!--Emmet语法写法：link:css-->
    <link rel="stylesheet" href="css/style.css" />
    <!--2.内部样式表-->
    <style type="text/css">
        @import "css/test.css";
        p{
            background-color: #eeeeee;
            font-size: 18px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <!--1.行间样式（嵌入式样式）-->
    <div style="color:olive;width:100px;border:1px solid blue;">行间样式测试1</div>
    <div>行间样式测试2</div>

    <p>段落1</p>
    <p>段落2</p>

    <span>外部样式测试</span>
    <span>外部样式测试</span>
    <span>外部样式测试</span>
    <span>外部样式测试</span>

    <div class="box">导入外部样式</div>
    <div class="box">导入外部样式</div>
    <div class="box">导入外部样式</div>

    <em class="box">同学们好！</em>
</body>
</html>

02.CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /* 1.*  li:first-child选取li首个元素-------------li:nth-child(2)选择第二个 */

/* * {
            color:red;
        }*/
        /* 2.标签选择器   */
        span{
            display: block;
            margin-right: 20px;
            border: 1px solid gray;
        }
        /* 3.类选择器   */
        .wrapper {
            color: aqua;
        }

        /* 4.id选择器*/
        #content {
            color: pink;
        }

        /* 5.派出选择器  */
        .box2 li {
            color: chartreuse;
        }
    </style>
</head>
<body>
    <p>这是P标签</p>
    <strong>这是strong标签</strong>

    <span>这是span标签</span>
    <div>这是div标签</div>

    <div class="wrapper">这是div标签</div>
    <p class="wrapper">这是div标签</p>

    <p id="content">这是内容</p>

    <ul class="box1">
        <li>li001</li>
        <li>li002</li>
        <li>li003</li>
    </ul>

    <ul class="box2">
        <li>li001</li>
        <li>li002</li>
        <li>li003
            <ul>
                <li>subli1</li>
                <li>subli2</li>
            </ul>
        </li>
    </ul>
</body>
</html>

03.选择器的分组和样式继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的分组及样式继承</title>
    <style type="text/css">
        /* 1. 选择器的分组*/
        h1, .box, p {
            color: red;
        }
        p {
            width: 100px;
            background-color: #999999;
            color: blue;
        }

        /* 2.样式继承*/
        .test {
            font-size: 28px;
        }
        /*.test span{
            font-weight: bold;
        }*/
        .test span{
            font-weight: bold;
            font-size: 12px;/*改写父元素传过来的样式*/
        }
    </style>
</head>
<body>
    <h1>h1</h1>
    <div class="box">box</div>
    <p>p</p>

    <div class="test">这是一段测试<span>内容</span>。</div>
</body>
</html>

04.样式权重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式权重</title>
    <style>
        p {
            color: blue!important;
        }

        #content div.main_content h2{ /*权重：100+1+10+1=112*/
            color:red;
        }
        #content .main_content h2{/*权重：100+10+1=111*/
            color:blue;
        }
    </style>
</head>
<body>
    <p style="color:red;">这是内容1</p>
    <p>这是内容2</p>

    <div id="content">
        <div class="main_content">
            52
            <h2>这是一个h2标题</h2>
        </div>
    </div>
</body>
</html>

05.CSS字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS字体</title>
    <style>
        p{
            font-size: 18px;
            font-family: 微软雅黑;
            /*font-style: italic;*/
            line-height: 2em;
            /*text-align: right;*/
            /*text-indent: 30px;*/
            text-indent: 2em;
        }
        p span {
            font-weight: 200;
            /*color: red;*/
            /*color: rgb(255,0,0);*/
           /* color: #ff0000;*/
            /*color: #f00;*/
            color: #ff1299; /*color:#f129;不能这样简写*/
        }
        em {
            text-decoration: line-through;
        }

        div{
            /*text-transform: capitalize;*/
            text-transform: uppercase;
        }

        .news {
            /*font:italic small-caps bolder 18px/1.5 宋体;*/
            font: 18px 宋体;
        }
    </style>
</head>
<body>
    <p><span>央视网消息</span>：全国妇联、国家卫生健康委、中央军委政治工作部联合下发《关
        于评选表彰新冠肺炎疫情防控一线女医务人员（集体）全国三八红旗手（集体）的
        通知》。同时，<em>全国妇联</em>还下发《关于评选表彰新冠肺炎疫情防控工
        作中作出突出贡献的先进女性（集体）全国三八红旗手（集体）的通知》。</p>
    <div>How are you?</div>

    <p class="news">How are you?全国妇联、国家卫生健康委、中央军委政治工作部联合下发《关
        于评选表彰新冠肺炎疫情防控一线女医务人员（集体）全国三八红旗手（集体）的
        通知》。同时，<em>全国妇联</em>还下发《关于评选表彰新冠肺炎疫情防控工
        作中作出突出贡献的先进女性（集体）全国三八红旗手（集体）的通知》。</p>
</body>
</html>

06.CSS背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS背景</title>
    <style>
        body {
            /*background-color: #eee;
            background-color: transparent;*/
            /*background-image: url(./images/bg.jpg);
            background-repeat: no-repeat;
            !*background-position: 100px 50px;*!
            background-position: top;!*如果只带一个参数，默认y向为50%*!
            background-attachment: fixed;*/
            height: 2000px;
            background: #888888 url(images/bg.jpg) repeat-x fixed 0 30%;
        }
    </style>
</head>
<body>

</body>
</html>

07.伪类选择器》a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

08.CSS属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS属性选择器</title>
    <style>
        div.content[title]{
            font-weight: bold;
        }
        input[name=usr]{
            background-color: #eee;
        }
        /*div[class~=box1]{
            background-color: #5aff29;
        }*/
        /*div[class^=content2]{
            background-color: #5aff29;
            color: #fff;
        }*/
        div[class$=box2]{
            background-color: #5aff29;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="content1 box1 box2" title="内容">content1</div>
    <div class="content2 box2">content2</div>

    <form action="">
        <input type="text" name="account">
        <input type="text" name="usr">
    </form>
</body>
</html>

09.关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /*后代选择器*/
        h1 strong{
            color:#fff;
            background-color: #000;
        }
        /*儿子选择器*/
       /* h1>strong{
            color:#fff;
            background-color: #000;
        }*/

        /*兄弟选择器*/
        ul li+li+li{
            list-style-type: none;
            color: red;
        }
    </style>
</head>
<body>
    <h1><strong>关系1</strong><span><strong>关系2</strong></span></h1>

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>
</body>
</html>

10.伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        p:first-letter{
            font: 60px 黑体;
            color: #2c3cff;
            text-indent: 2em;
        }
        p:first-line{
            text-decoration: underline;
        }

        p:before{
            content: '★';
        }

        p::after{
            content: '……';
        }
    </style>
</head>
<body>
    <p>伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，
        并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。</p>
</body>
</html>

总结：

1.CSS:层叠样式表，用来美化网页的。做到结构（HTML）和表现（CSS）分离。
2.基本语法：
    选择器 {
        属性: 属性值;
    }
3.CSS引用方式：行间样式、内部样式、外部样式、导入外部样式。
    行间样式：直接在标签上书写样式。
    内部样式：在文件的内部书写样式。
        <style type="text/css">
            样式内容
        </style>
    外部样式：（1）先创建一个CSS文件；（2）再用link标签引入这个文件。
    导入外部样式：（1）先创建一个CSS文件；（2）在style标签中用import导入这个样式文件。

    以上四种CSS引用方式的区别：
        行间样式只作用于当前标签；而内部样式作用于当前文件；外部样式可以被多个HTML文件引用。
        在实际项目开发中，最好使用外部样式。
        外部样式分为link引入和import引入两种方式。这两种方式区别：
            1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
            2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
            3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
            4）link支持使用Javascript控制DOM去改变样式；而@import不支持。
4.CSS选择器分类：
    1）*：匹配html中所有元素（注意：*的性能差，因为它要匹配所有元素，所以在开发时，不建议使用）
    2）标签选择器：用来匹配对应的标签
    3）类选择器：用来选择class命名的标签
    4）ID选择器：用来选择用id命名的标签
    5）派出选择器：根据上下文来确定选择的标签
    6）伪类选择器
    7）伪元素选择器
5.选择器的分组
    让多个选择器（元素）具有相同的样式，一般用于设置公共样式。
6.选择器的继承
    子元素可以继承父元素的样式，反之不可以。
7.样式权重
    !important(10000)>内联样式(1000)>id选择器(100)>类、伪类和伪元素选择器(10)>标签选择器(1)

8.CSS字体
    1)font-size:字号(px/%)
    2)font-family:字体
    3)font-style:文字样式(normal/italic/oblique)
    4)font-weight:文字加粗(normal/bold/bolder/lighter/100-900)
    5)line-height:行高(px/数字/em等)
    6)color:文字的颜色(颜色的单词/rgb()->r:0-255,g:0-255,b-0-255/16进制(以#开头，后跟6位(#rrggbb)或3位(#rgb)16进制数）
    7)text-decoration:文字修饰(none/underline/overline/line-through)
    8)text-align:文本对齐方式(left/right/center)
    9)text-transform:字母大小写(capitalize/uppercase/lowercase/none)
    10)text-indent:文本缩进(px/em/%/pt等)

    Tip:
        font复合属性：
            font:font-style font-variant font-weight font-size/line-height font-family;
            注意：
                1）属性值的位置顺序
                2）除了font-size和font-family之外，其它任何一个属性值都可以省略
                3）font-variant：normal/small-caps（让大写字母变得小一些）
9.CSS背景
    1)background-color:背景色(transparent/color)
    2)background-image:背景图(none/url)
    3)background-repeat:背景图像铺排方式(repeat/no-repeat/repeat-x/repeat-y)
    4)background-position:设置对象的背景图像位置({x-number | top | center | bottom } {y-number | left | center | right })
    5)background-attachment:背景图像滚动位置(scroll/fixed)
    6)background:设置背景的复合写法
        background: color image repeat attachment position
10.CSS伪类选择器
    伪类：专门用来表示元素的一种特殊状态。
    常用伪类选择器：
        1)a标签的伪类：
            :link/:visited/:hover/:active
        2):focus 获得焦点
        3):first-child/:last-child/:nth-child(number)
11.属性选择器
    [属性名]:包含有指定属性名的元素（常用）
    [属性名=值]:属性名的值为指定值的元素（常用）
    [属性名~=值]:属性名的值包含指定值的元素
    [属性名^=值]:属性名的值以指定值的开头的元素
    [属性名$=值]:属性名的值以指定值的结尾的元素
12.关系选择器
    1)空格：后代选择器
    2)>：只选择儿子元素
    3)+：兄弟选择
13.CSS伪元素
    1）CSS伪元素与伪类区别：
        css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。

        伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
        它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

        伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，
        并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

    2）伪元素&伪类的特点：
        伪元素和伪类都不会出现在源文档或者文档树中
        伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面
        伪元素名和伪类名都是大小写不敏感的
        有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）

    3）:before/:after/:first-letter/:first-line : 前面可以是1个冒号也可以是双冒号
        ::selection/::placeholder/::backdrop : 前面只能是双冒号