02-03 CSS快速入门

css四种引入方式：
test.html:

p{

            color: gold;

            font-size: 20px;

        }

title.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<style>-->        #插入式

        <!--p{-->

            <!--color: rebeccapurple;-->

            <!--font-size: 40px;-->

        <!--}-->

        <!--a{-->

            <!--text-decoration: dashed;-->

        <!--}-->

    <!--</style>-->

    <!--链接式-->

    <!--<link href="test1.css" rel="stylesheet">-->

    <!--导入式-->

    <style>

        @import "test1.css";

    </style>

</head>

<body>

<!--第一种引入方式-->

<!--<div style="color: red;background-color: beige">hello yuan </div>-->

<div>hello div</div>

<p>hello p</p>

<a href="">点我</a>

</body>

</html>

选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /**{*/          /*一号选择器

            /*color:red;*/

        /*}*/

        /*#little_P{*/      /*二号宝宝

            /*background-color: blue;*/

        /*}*/

        /*.PP{            !*三号宝宝*/

            /*color:fuchsia;*/

        /*}*/

    </style>

</head>

<body>

hello body

<div>hello div</div>

<p id = 'little_P'>pppppp</p>

<p class = "PP">ppp</p>

<p class = "PP">pp</p>

</body>

</html>

组合选择器：
1.块级元素可以包含内联元素但内联元素不能包含块级元素它只能包含
其他内联元素。
2.有几个特殊的块级元素只能包含内联元素不能包含块级元素
3.li内可以包含div
4.块级元素与块级元素并列内敛元素与内敛元素并列。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /**{*/          /*一号选择器

            /*color:red;*/

        /*}*/

        /*#little_P{*/      /*二号宝宝

            /*background-color: blue;*/

        /*}*/

        /*.PP{            !*三号宝宝*/

            /*color:fuchsia;*/

        /*}*/

        /*little_P,div.cuihua{        组合*/

            /*color:crimson;*/

        /*}*/

        /*.div1 div{*/

            /*color:sienna;*/

        /*}*/

        /*.div1 div>P{*/

            /*color:aqua;*/

        /*}*/

                /*.div1 + div{*/

             /*background-color: chartreuse;*/

         /*}*/

        /*p div{*/

            /*color: red;*/

        /*}*/

    </style>

</head>

<body>

hello body

<div class="cuihua">hello div</div>

<p id = 'little_P'>pppppp</p>

<p class = "PP">ppp</p>

<p class = "PP">pp</p>

<div1 class="div1">

    <div class="div2">

        <!--<a href = "">a</a>-->

        <p class="P">pphahahahha</p>

        <div3>woshi duv3 heihei</div3>

    </div>

</div1>

</body>

</html>

属性：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        [alex]{

            color:green;

        }

        [alex="dasb"]{

            font-size:30px;

            /*font-family:"Time new roman"*/

        }

    </style>

</head>

<body>

<div>hello1</div>

<div alex="sb LI">alex</div>    /*attention space

<div alex="dasb">div alex1</div>

<p alex="dasb">ppalex</p>

<div>hello1</div>

</body>

</html>

伪类：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

    a:link{

        color: red;

    }

    a:visited {

        color: blue;

    }

    a:hover {

        color: green;

    }

    a:active {

        color: yellow;

    }

    .box{

        width: 100px;

    }

        .top,.bottom{

            width: 100px;

            height: 100px;

            background-color: chartreuse;

        }

        /*.top:hover{*/

            /*background-color: red;*/

        /*}*/

        /*.box:hover .bottom{*/

            /*background-color: red;*/

        /*}*/

       .add:after{

           content: "欢迎加入前端学习";

           color: red;

       }

    </style>

</head>

<body>

    <a href="css_引入方式.html">hello-world</a>

   <div class="box">

         <div class="top"></div>

         <div class="bottom"></div>

   </div>

    <div class="add">hello yuan</div>

</body>

</html>

优先级：
所谓CSS优先级即是指CSS样式在浏览器中被解析的先后顺序
样式中的特殊性描述了不同规则的相对权重。它的基本规则是：
1.内联样式表中的权值最高 style=“”
2.统计选择符中的ID属性个数 #id
3.统计选择符中的class个数 .class
4.统计选择符号中HTML标签个数 p

附加说明：
1、纹内的样式优先级是1,0,0,0，所以始终高于外部定义.
这里文内样式指的是如<div style="color:red>blah</div>的样式
而外部定义指经由<link>或<style>卷标定义的规则
2. 有！important 声明的规则高于一切
3、如果声明冲突仍然比较优先权
4、如果优先权一样则按照源码中的顺序决定后来者居上
5.由继承而得到的样式没有specificity的计算它低于一切其他规则

背景属性：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p{

            color: rgba(22, 46, 122,0.8);

            font-size:20px;

            font-weight: 900;

            font-style:italic;

            background-color: aliceblue;

            /*background-image: url("haha.jpg");*/

        }

        . back{

            width:800px;

            height:800px;

            background-image: url("haha.jpg");

            background-repeat: no-repeat;

            background-position: center;

        }

    </style>

</head>

<body>

<p>独在异乡为异客

每逢佳节倍思亲</p>

<div>

    class back

</div>

</body>

</html>

文本属性：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            text-transform: capitalize;

            word-spacing: 20px;

            letter-spacing: 10px;

            text-indent: 150px;

            height: 100px;

            background-color: aquamarine;

            text-align: center;

            /*line-height: 100px;*/

        }

    </style>

</head>

<body>

<div>介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性</div>

<div>hello world hello world hello world hello world hello world hello world hello world</div>

</body>

</html>

列表属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div2,p,a,span{

             width: 100px;

             height: 100px;

        }

         .div2{

             background-color: yellow;

             /*display: inline;*/

             display: none;

         }

        p{

             background-color: red;

            /*display: inline;*/

         }

        span{

             background-color: palevioletred;

             display: inline-block;

         }

        a{

             background-color: green;

             display: inline-block;

         }

        .outer{

            word-spacing: -8px;

        }

    </style>

</head>

<body>

<div class="div2">divvvvv</div>

<p>pppppp</p>

<div class="outer">

    <span>spannnnnn</span>

    <a href="#">click</a>

</div>

</body>

</html>

内外边距

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div1{

            width: 200px;

            height: 200px;

            background-color: antiquewhite;

            border: 40px solid rebeccapurple;

            /*padding: 40px;*/

            /*margin: 20px;*/

            /*margin-bottom: 40px;*/

            /*margin: 10px 20px 30px 40px;*/

            /*margin-top: 30px;*/

            /*margin-bottom:40px;*/

        }

        .div2{

            width: 200px;

            height: 200px;

            background-color: lightblue;

            /*border: 20px solid red;*/

            /*padding: 5px;*/

            /*margin-top: 40px;*/

        }

        /*.outer{*/

            /*height: 1000px;*/

            /*background-color: aquamarine;*/

            /*!*border: 1px red solid;*!*/

            /*!*padding: 1px;*!*/

            /*overflow: hidden;*/

        /*}*/

        /*.outer2{*/

            /*width: 1000px;*/

            /*height: 1500px;*/

            /*background-color: firebrick;*/

        /*}*/

        /*body{*/

            /*border: 2px solid darkcyan;*/

            /*margin: 0px;*/

        /*}*/

    </style>

</head>

<body>

<!--<div class="outer2">-->

<!---->

    <!--<div class="outer">-->

    <div class="div1">hello div1</div>

    <div class="div2"></div>

        <!--<span>uuu</span><span>ooo</span>-->

<!--</div>-->

<!--</div>-->

</body>

</html>

浮动：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div1{

            width: 100px;

            height: 100px;

            background-color: beige;

            float: left;

        }

         .div2{

            width: 200px;

            height: 100px;

            background-color: rebeccapurple;

             float: left;

             clear: left;

        }

         .div3{

            width: 100px;

            height: 200px;

            background-color: green;

            float: left;

            clear: right;

        }

         .div4{

            width: 200px;

            height: 200px;

            background-color: yellow;

           float: left;

        }

    </style>

</head>

<body>

<div class="div1"></div>

<div class="div2"></div>

<div class="div3"></div>

<div class="div4"></div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<style type="text/css">

         * {

             margin:0;padding:0;

         }

        .container{

            border:1px solid red;

            width:300px;

            overflow: hidden;

        }

        #box1{

            background-color:green;

            width:100px;

            height:100px;

            float: left;

        }

        #box2{

            background-color:deeppink;

            float:right;

            width:100px;

            height:100px;

        }

         #box3{

             background-color:pink;

             height:40px;

         }

        .clearfix:after{

            content:"";

            display: block;

            clear: both;

        }

</style>

</head>

<body>

        <div class="container">

                <div id="box1">box1 向左浮动</div>

                <div id="box2">box2 向右浮动</div>

        </div>

        <div id="box3">box3</div>

</body>

</body>

</html>

定位属性：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /**{*/

            /*margin: 0px;*/

        /*}*/

        .div1{

            width: 200px;

            height: 100px;

            background-color: beige;

        }

         .div2{

            width: 200px;

            height: 100px;

            background-color: rebeccapurple;

            position: relative;

             position: absolute;

            left: 100px;

            top:  100px;

        }

         .div3{

            width: 200px;

            height: 200px;

            background-color: green;

             /*position: relative;*/

             /*top:-100px;*/

             /**/

        }

         .div4{

            width: 200px;

            height: 200px;

            background-color: yellow;

        }

        .outer{

            position: relative;

        }

        .returnTop{

            width: 80px;

            height: 50px;

            position: fixed;

            bottom: 20px;

            right: 5px;

            background-color: gray;

            color: white;

            text-align: center;

            line-height: 50px;

        }

    </style>

</head>

<body>

<div style="height: 200px;background-color: aqua"></div>

<div class="outer">

    <div class="div1"></div>

    <div class="div2"></div>

    <div class="div3"></div>

    <div class="div4"></div>

</div>

<div style="height: 2000px;background-color: darkgoldenrod"></div>

<div class="returnTop">返回顶部</div>

</body>

</html>

02-03 CSS快速入门的更多相关文章

CSS快速入门（四）
目录 CSS快速入门(四) 浮动 float属性 clear属性浮动解决的问题及其影响解决父标签塌陷的方法浮动案例定位什么是脱离文档流定位的两种方法 position定位 static定位 ...
Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介快速入门系列--HTML-02基础元素快速入门系列--HTML-03高级元素和布局快速入门系列--HTML-04进阶概念示例 ...
Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介快速入门系列--HTML-02基础元素快速入门系列--HTML-03高级元素和布局快速入门系列--HTML-04进阶概念边框 ...
Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介快速入门系列--HTML-02基础元素快速入门系列--HTML-03高级元素和布局快速入门系列--HTML-04进阶概念之前 ...
HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目软件架构 C/S架构:Client/Server 客户端/服务器用户本地有一个客户端程序,在远程有一个服务端程序如QQ,英雄联盟. ...
第02章 Python快速入门
007.快速入门,边学边用 008.变量类型 print(type(变量)) 查看变量的了类型现在常用的变量的类型有整型.浮点型.字符型 009.List基础模块类型转换:str(8 ...
JavaScript学习02（js快速入门）
快速入门基本语法 JavaScript的语法和Java的语法类似,每个语句以;结束,语句块用{...}.但是JavaScrip并不强制要求在每个语句的结尾加;,浏览器中负责执行JavaScript代 ...
CSS快速入门例子
CSS入门应用 01-结合方式01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
#001 CSS快速入门讲解
CSS入门讲解 HTML人+CSS衣服+JS动作=>DHTML CSS: 层叠样式表 CSS2.0 和 CSS3.0 版本,目前学习CSS2, CSS3只是多了一些样式出来而已 CSS 干啥用的 ...

随机推荐

iOS launchImage
iOS launchImage https://stackoverflow.com/questions/34027270/ios-launch-screen-in-react-native 如何设置: ...
Appium环境搭建——安卓模拟器（AVD）调试 2-运行Apk失败点的总结
如何优化AVD模拟器运行速度? 解决方法:开启IntelHAXM 查询intelhaxm是否已经开启: sc query intelhaxm 若开启成功,则如图所示若没有开启,可以通过BIOS打开, ...
第二次作业-分布式版本控制系统Git的安装与使用
本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2103 我的github远程仓库的地址:https://github ...
Linux第九节课学习笔记
fdisk可添加.删除.转换分区. 创建主分区:n-p-w:扩展分区:n-e:逻辑分区:n-l. SWAP分区专用格式化命令mkswap,专用挂载命令swapon. 磁盘容量配额中,硬限制必须,软限制 ...
控制使用jquery load()方法载入新页面中的元素
最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...
Git与Github的连接与使用
下面继续,使用git 将项目上传到GitHub上首先要有GitHub账号,这就不用说了,没有的先注册,地址:https://github.com 没有仓库的话,先新创建一个仓库填写新仓库名称,备注 ...
req和resp常用的方法
req: 1. setAttribute()在Request域中存储数据 2. setCharacterEncoding()设置请求参数的编码方式,只对post请求有效 3. getMethod() ...
vs编码对编译的影响（UTF-8 no BOM编译通不过）
VS的编译器对Unicode源代码支持如下: UTF-16 little endian with or without byte order mark (BOM). UTF-16 big endian ...
PCIE读书笔记
PCIE读书笔记什么是TLP:
【Angular】——TypeScript之胖箭头(=>)函数
前言:胖箭头(=>)函数是一种快速书写函数的简介语法. ES5和TypeScript比较:在ES5中,每当我们要用甘薯作为方法参数时,都必须用function关键字和紧随其后的花括号({})表示 ...

02-03 CSS快速入门

02-03 CSS快速入门的更多相关文章

随机推荐

热门专题