一 CSS

CSS是Cascading Style Sheets的缩写，层叠样式表，用来控制网页数据的显示，可以使网页的显示与数据内容分离。

二 引入方式

　　（1）行内式：在标记的style属性中设置CSS样式，不推荐使用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Hello CSS</title>

</head>

<body>

    <div style="color: aqua;background-color: bisque">hello world</div>

</body>

</html>

行内式

　　（2）嵌入式：将CSS样式集中写在网页的<head></head>标签找那个的<style></style>标签中。结果和上图一致；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Hello CSS</title>

    <style>

        div{

            color: aqua;

            background-color: bisque;

        }

    </style>

</head>

<body>

    <div >hello world</div>

</body>

</html>

嵌入式

　　（3）链接式：写一个*.css文件引入到HTML文件中。不知道为什么用Chrome浏览器和IE都不能显示，但在Windows Edge浏览器中可以。推荐使用这种方式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Hello CSS</title>

    <link  href="myCss.css" rel="stylesheet" type="text/css"/>

</head>

<body>

    <div >hello world</div>

</body>

</html>

链接式

div{

    color: aqua;

    background-color: bisque;

}

CSS文件

　　（4）导入式：在<head></head>标签中的<style></style>标签中导入*.css文件。还是只能在Windows Edge中正常显示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Hello CSS</title>

    <style type="text/css">

        @import "myCss.css";

    </style>

</head>

<body>

    <div >hello world</div>

</body>

</html>

导入式

　　如果以上几种方式同时使用，采取就近原则，离标签最近的样式将被适用。

三 CSS选择器

　　选择器是用来指定样式的作用对象，作用于哪些标签。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Hello CSS</title>

    <style type="text/css">

        *{   {#通用选择器#}

            background-color: aqua;

        }

        div{ {#标签选择器， 标签名字#}

            font-size: 50px;

        }

        #name{ {#以标签中的id作为选择器， 前面加"#" #}

            color: black;

        }

        .p2{ {#以标签中的id作为选择器，前面加"." #}

            font-style: oblique;

        }

        .div1 p1{ {#后代选择器， div1是父代标签class，p1是子代标签class 只要是有这种层级关系的都会被指定， 用空格隔开#}

            font-size: 60px;

        }

        .div1>.p1{ {#子代选择器，div1是父代标签class，p1是子代标签class 只会把子代指定样式， 用大于号隔开#}

            color: darkcyan;

        }

        #name, #sex{ {#同时指定多个没有标签样式，并列选择器，用逗号隔开#}

            color: coral;

        }

        .div1+#name{ {#毗邻选择器， 会指定class是div1的紧挨着的下一个id是name的标签的样式#}

            color: blue;

        }

        [class]{  {# 属性选择器 所有这类属性的标签都有这个样式 #}

            color: red;

        }

        [class="p2"]{ {# 属性选择器 指定属性值为p2 的标签的样式 #}

            color: black;

        }

        [name]{     {# 为自己创建的属性添加样式 #}

            font-size: 50px;

        }

        div [class="p2"]{ {# 当用属性键值对区分不出时，可以在前面加上标签名，用来指定样式 #}

            color:black;

        }

        p [class="p2"]{ {# 指定p标签中属性class值等于p2的标签的样式 #}

            color: blue;

        }

        [class~="div2"]{ {# 指定标签属性中只要有一个属性是div2的标签的样式，可以选中一个属性多个值 #}

            background-color: yellow;

        }

        [class ^= "div2"]{ {# 指定class属性的值得开头为div2的标签的样式 #}

            background-color: yellow;

        }

        [class $= "div2"]{ {# 指定class属性的值以div2结尾的标签的样式 #}

            background-color: yellow;

        }

        [class *= "div2"]{ {# 指定class属性的值包含div2的标签的样式 #}

            background-color: yellow;

        }

    </style>

</head>

<body>

    <div >hello world</div>

    <div class="div1">

        <p class="p1">div p</p>

    </div>

    <p id="name">I'm damon</p>

    <p id="sex">Man</p>

    <p class="p2">p2标签</p>

    <div class = "p2">classp2 div</div>

    <p name="damon">damon</p> {# 自己创建个name属性 但浏览器不认识#}

    <div class="div2 div3">两个属性</div> {# 这个标签的class属性有两个值div2 div3 #}

</body>

</html>

四 伪类

伪类是对选择器添加特效

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Hello CSS</title>

    <style type="text/css">

        a:link{ {# 定义链接时的样式 #}

            color: yellow;

        }

        a:hover{ {# 定义鼠标悬浮到链接时的样式 #}

            color: blue;

        }

        a:visited{  {# 定义链接被访问后的样式 #}

            color: black;

        }

        a:active{ {# 定义链接访问时的样式 #}

            color: red;

        }

    </style>

</head>

<body>

    <a href="www.baidu.com">anchor伪类</a>

</body>

</html>

anchor伪类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Hello CSS</title>

    <style type="text/css">

        #p1:before{

            content: "伪类"; {# 在id是p1的标签的内容前面加‘伪类’ #}

            color: red;

        }

        #p2:after{

            content: "伪类"; {# 在id是p2的标签的内容后面加‘伪类’ #}

            color: darkcyan;

        }

    </style>

</head>

<body>

    <p id="p1"> before </p>

    <p id="p2"> after </p>

</body>

</html>

before,after伪类

五 常用属性

　　1.颜色属性：下面是颜色属性常用的四种表示方式

<div style="color: red">英文单词</div>

<div style="color: #ff2233">十六进制</div>

<div style="color: rgb(255,0,0)">rgb</div>

<div style="color: rgba(255,0,0,0.5)">rgba</div>

　　

　　2.字体属性

<div style="font-size: smaller">字体大小</div>

<div style="font-family: 'Times New Roman'">字体样式</div>

<div style="font-weight: lighter">字体粗细</div>

<div style="font-style: italic">字体倾斜</div>

　　

　　3.背景属性

background-color: red; {# 设置背景颜色 #}

background-image: url("1.jpg"); {# 设置背景图片 #}

background-repeat: no-repeat; {# 背景图片是否平铺整个背景 #}

background-size: 100px 200px; {# 背景图片大小 #}
background-position； center center; {#背景图片位置在上下的中心 左右的中心 #}

也可以直接这么写：
background: red no-repeat url("1.jpg") 100px 200px;

　　

　　4.文本属性

text-align: center; {# 文本居中 #}

line-height: 100px; {# 文本所占行的高度 #}

text-indent: 10px; {# 文本首行缩进 #}

letter-spacing: 10px; {# 文本中每个字母的间隙 #}

word-spacing: 10px; {# 文本中每个单词的间隙 #}

text-transform: capitalize; {# 文本中单词首字母大写 #}

　　

　　5.外边距和内边距

　　在html中一切皆盒子。margin是盒子与盒子之间的距离，border是盒子的边界，padding是盒子边界距离内容的距离

　　

　　注意：当指定一个CSS元素的长度和宽度时，指定的是内容区域的长宽，要指定完全体的长宽，还需指定边宽和边距。

　　6.边界属性　

border-stype: solid

border-color: red

border-width: 20px

简写：border: 10px red solid　　

　　7.浮动属性

　　块级元素在排布上独占一行，每个元素会独立占一行，可以设置width,height,margin,padding属性。

　　内联元素不会独占一行，多个元素会排列在同一行内，内联函数设置width,height无效，padding-left,padding-right,margin-left,margin-right有效果，但padding-top,padding-bottom,margin-top,margin-bottom不会有效果

　　常见文档流：元素布局会遵循从上到下，从左到右的规律。

　　脱离文档流：元素不存在正常的布局中，其他元素会视其不存在而进行正常布局。两种方式：float（非完全脱离），postion: absolute fixed（完全脱离）

　　（1）Float

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div1{

            background-color: red;

            width: 100px;

            height: 100px;

            float: left;

        }

        .div2{

            background-color: green;

            width: 100px;

            height: 100px;

            float: left;

        }

        .div3{

            background-color: yellow;

            width: 200px;

            height: 200px;

        }

    </style>

</head>

<body>

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

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

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

</body>

</html>

float

　　                                                                  

　　可以看到规律：当div2浮动时，如果div1也是浮动，那么div2会紧跟着div1的后面，如果div1不是浮动，那么div2会与div1相对位置不发生改变，而div3都会视浮动标签不存在，位置向上顶替。

　　　　　　　　　在div3清除浮动后，div3没有再顶替div1和div2的位置。

　　在布局上推荐用float，不要用postion。

　　当给三个标签加上文本，只有div2向左浮动，结果：

　　

　　（2）Position　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div1{

            background-color: red;

            width: 100px;

            height: 500px;

        }

        .div2{

            background-color: green;

            width: 100px;

            height: 500px;

        }

        a{

            position: fixed;

            bottom: 20px;

            right: 20px;

        }

    </style>

</head>

<body>

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

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

    <a>返回顶部</a>

</body>

</html>

position: fixed

　　　可以看到a标签会在右下角，不随着滚动条的滚动，位置发生改变。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div1{

            background-color: red;

            width: 100px;

            height: 100px;

        }

        .div2{

            background-color: green;

            width: 100px;

            height: 100px;

            position: relative;

            top: 100px;

            left: 100px

        }

         .div3{

             background-color: yellow;

             width: 200px;

             height: 200px;

         }

    </style>

</head>

<body>

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

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

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

</body>

</html>

position: relative

　

　　可以看到div2的位置是相对原来的位置分别向右和下移动了100像素，div3没有发生改变（所以div2没有完全脱离文档流），这是position:relative的功能。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .div1{

             background-color: red;

             width: 100px;

             height: 100px;

         }

         .div2{

             background-color: green;

             width: 100px;

             height: 100px;

             position: absolute;

             top: 100px;

             left: 100px

         }

          .div3{

              background-color: yellow;

              width: 200px;

              height: 200px;

          }

     </style>

 </head>

 <body>

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

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

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

 </body>

 </html>

position: absolute

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div1{

            background-color: red;

            width: 100px;

            height: 100px;

        }

        .div2{

            background-color: green;

            width: 100px;

            height: 100px;

            position: absolute;

            top: 100px;

            left: 100px

        }

         .div3{

             background-color: yellow;

             width: 200px;

             height: 200px;

         }

        .div2parent{

            position: relative;

        }

    </style>

</head>

<body>

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

    <div class="div2parent">

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

    </div>

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

</body>

</html>

加了父标签

 

　　可以看到：在加了父标签后，div2移动的位置发生了改变。这里就是position: absolute的用法：div2会一直向上找position!=static（static就是正常文档流,是默认的）的父标签，然后根据这个父标签的位置进行移动。

　　如果没没有符合要求的话，就根据最外层进行移动

　　8.display属性

　　用来将块级标签和内联标签互相转换　

display: block

display: inline

display: inline-block

六 嵌套规则

　　1. 块级元素可以嵌套内联元素或者某些块级元素，内联元素不能包含块级元素而只能包含其他内联元素；

　　2. h1, h2, h3, h4, h5, h6 p, dt这些块级元素只能包含内联元素；

　　3. li内可以包含div；

　　4. 块级元素应该与块级元素并列， 内联元素与内联元素并列；

参考文献：

https://www.cnblogs.com/yuanchenqi/articles/5977825.html

前端学习(3)-CSS的更多相关文章

  1. 前端学习：CSS的学习总结(图解）

    前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位

  2. 2016.01.22 前端学习 HTML/CSS

    学习HTML/CSS  http://edu.51cto.com/course/course_id-3116.html 明日实践

  3. 前端学习 之 CSS（三）

    九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...

  4. 前端学习之CSS

    CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...

  5. 前端学习 -- Html&Css -- 条件Hack 和属性Hack

    条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...

  6. 前端学习笔记——CSS选择器

    学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...

  7. 前端学习 之 CSS（二）

    五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...

  8. 前端学习 之 CSS（一）

    一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...

  9. 前端学习笔记 - Css初级篇

    有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...

  10. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

随机推荐

  1. 一起了解 .Net Foundation 项目 No.10

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. LLILC LLILC ( ...

  2. C语言入门理解指针

    本文章为本人原创,适合于刚入坑C语言,对于指针的定义和用法模糊不清的同学,如有不正,请各位指出. 从根本来说,指针变量也是变量,只是int变成了int *,以此类推.只不过指针变量里面放的内容是普通变 ...

  3. DOM3中的自定义事件

    DOM3级还定义了自定义事件,自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件.要创建的自定义事件可以由createEvent("CustomEvent"); ...

  4. vue-cli脚手架目录（2.0）

    vue-cli脚手架目录一览   最近在学习vue,看的稀里糊涂.今天从头开始,把cli配置的vue项目目录和配置文件搞清楚. 先看看整个项目目录结构: 再看看build文件夹下相关文件及目录: co ...

  5. 微信SEO怎么做-最新微信SEO干货

    星辉信息科技进行微信SEO已经很多年了,结合多年的微信SEO经验通过浅谈微信SEO.微信SEO的3大优势.微信SEO的6个排名技巧.企业和个人微信SEO的4大优化战略来讲,可以完美解决B端C端微信获客 ...

  6. 编译putty 源码去掉 Are you sure you want to close this session? 提示

    0, 为什么要编译 putty ?在关闭窗口的时候,会弹出一个 Are you sure you want to close this session?要把这个去掉.当然也可以用 OD 之类的来修改. ...

  7. Spring Boot从入门到精通（九）整合Spring Data JPA应用框架

    JPA是什么? JPA全称Java Persistence API,是Sun官方提出的Java持久化规范.是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. ...

  8. HTML5&CCS3（3）基本HTML结构

    3.1 开始编写网页 每个HTML文档都应该包含以下基本成分: DOCTYPE: html元素(包含lang属性.该属性不是必需的,但推荐加上): head元素: 说明字符编码的meta元素: tit ...

  9. kafka集群搭建及结合springboot使用

    1.场景描述 因kafka以前用的不多,只往topic中写入和读取过数据,这次刚好又要用到,记录下kafka集群搭建及结合springboot使用. 2. 解决方案 2.1 简单介绍 (一)关于kaf ...

  10. js 小练习题

    <script> /*1.结论,IIFE中运行顺序3,1,执行test(4),会传递参数*/ /*var a=5; var test = (function(a){ console.log ...