一 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. Java常见的类——Number和Math类

    但我们使用数据时,我们一般使用内置数据类型,列如:byte,int,long,double等,但是在实际开发过程中,我们一般遇到的是需要使用对象,这时,我们就可以使用 Java 专门为每一个数据类型提 ...

  2. vue之initComputed模块源码说明

    要想理解原理就得看源码,最近网上也找了好多vue初始化方法(8个init恶魔...) 因为也是循序渐进的理解,对initComputed计算属性的初始化有几处看得不是很明白,网上也都是含糊其辞的(要想 ...

  3. SpringBoot图文教程12—SpringData Jpa的基本使用

    有天上飞的概念,就要有落地的实现 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例都敲一遍 先赞后看,养成习惯 SpringBoot 图文教程系列文章目录 SpringBoot图文教程1「概念+ ...

  4. office一直提示配置进度与图标问题

    原来安装了wps office,广告太烦,于是卸载了wps安装Microsoft office 2010,安装完成后每次打开excel文件都要重新安装配置,修改注册表norereg和设置兼容模式都不行 ...

  5. scrapy中间件中使用selenium切换ip

    scrapy抓取一些需要js加载页面时一般要么是通过接口直接获取数据,要么是js加载,但是我通过selenium也可以获取动态页面 但是有个问题,容易给反爬,因为在scrapy中间件mid中使用sel ...

  6. 通过CGAL将一个多边形剖分成Delaunay三角网

    目录 1. 概述 2. 实现 3. 结果 4. 参考 1. 概述 对于平面上的点集,通过Delaunay三角剖分算法能够构建一个具有空圆特性和最大化最小角特性的三角网.空圆特性其实就是对于两个共边的三 ...

  7. python code practice（二）：KMP算法、二分搜索的实现、哈希表

    1.替换空格 题目描述:请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 分析: 将长度为 ...

  8. Vue.js组件嵌套和template外用

    Vue.extend组件的嵌套和template外用 组件嵌套分为全局组件嵌套和局部组件嵌套 组件嵌套需要将子元素写在父元素内 子组件必须在父组件中注册之后才能在父组件的模板中使用 全局组件嵌套 Vu ...

  9. PLINQ 并行操作Linq

    C#并行编程-PLINQ:声明式数据并行   目录 C#并行编程-相关概念 C#并行编程-Parallel C#并行编程-Task C#并行编程-并发集合 C#并行编程-线程同步原语 C#并行编程-P ...

  10. 如何查看QQ坦白说来自谁

    近两天QQ新功能的坦白说开始席卷朋友圈,一个醒目的小窗就这样明晃晃出现在QQ对话列表"有人对你说:--"下面我们就来整理一下怎么看到是谁给你发送的坦白说呢? 方法一: 此方法仅限于 ...