css知识点整理

　　CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

一、css引入的方式

　　1、行内样式：行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

　　2、嵌入式：嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

　　<head>

.　　..此处写CSS样式

　　</style>

　　</head>

　　3、导入式：将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

@import"mystyle.css"; 此处要注意.css文件的路径

</style>

　　4、链接式：也是将一个.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/>

　　注意:导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这

　　是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样

　　先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

　　二、css的选择器

　　“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

　　1、基础选择器：

　　＊：通用元素选择器，匹配任何元素 * { margin:0; padding:0; }

　　E ：标签选择器，匹配所有使用E标签的元素p { color:green; }

　　.info和E.info: class选择器，匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }

　　#info和E#info id选择器，匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }

　　2、组合选择器：　　

　E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 Div,p { color:#f00; }

E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 #nav li { display:inline; } li a { font-weight:bold; }

E > F 子元素选择器，匹配所有E元素的子元素F div > strong { color:#f00; }

　　E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F p + p { color:#f00; }

　　注意嵌套规则：　

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
块级元素不能放在p里面。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列。（错误的：<div><h2></h2><span></span></div>）

　　3、属性选择器

　　E[att] 匹配所有具有att属性的E元素，不考虑它的值。

（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }

E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，

比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { color:#f00; }

E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}

E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}

E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}

p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}

p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}

　　4、伪类选择器

伪类选择器：专用于控制链接的显示效果，伪类选择器：

a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

伪类选择器 : 伪类指的是标签的不同状态:

a ==> 点过状态没有点过的状态鼠标悬浮状态激活状态

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

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

　　a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

　　a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

　　三、css常用属性

　　1、颜色属性　

　　<div style="color:blueviolet">ppppp</div>

　　<div style="color:#ffee33">ppppp</div>

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

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

　　2、字体属性　

　　font-size: 20px/50%/larger

　　font-family:'Lucida Bright'

　　font-weight: lighter/bold/border/

　　3、背景属性

　　background-color: cornflowerblue

　　background-image: url('1.jpg');

　　background-repeat: no-repeat;(repeat:平铺满)

　　background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

注意：如果讲背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片，另外，如果此时要设置一个

width＝100px，你也看不出效果，除非你设置出html。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         html{

             background-color: antiquewhite;

         }

         body{

             width: 100px;

             height: 600px;

             background-color: deeppink;

             background-image: url(1.jpg);

             background-repeat: no-repeat;

             background-position: center center;

         }

     </style>

 </head>

 <body>

　　4、文本属性

　　 white-space: 设置元素中空白的处理方式

normal：默认处理方式。
pre：保留空格，当文字超出边界时不换行
nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
pre-wrap：保留空格，当文字碰到边界时换行
pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

　　direction: 规定文本的方向

ltr 默认，文本方向从左到右。
rtl 文本方向从右到左。

　　text-align: 文本的水平对齐方式

left
center
right

　　line-height: 文本行高

normal 默认

　　vertical-align: 文本所在行高的垂直对齐方式

baseline 默认
sub 垂直对齐文本的下标，和<sub>标签一样的效果
super 垂直对齐文本的上标，和<sup>标签一样的效果
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端与所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐

　　text-indent: 文本缩进

　　letter-spacing: 添加字母之间的空白

　　word-spacing: 添加每个单词之间的空白

　　text-transform: 属性控制文本的大小写

capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义仅有小写字母。

　　text-overflow: 文本溢出样式

clip 修剪文本。
ellipsis 显示省略符号...来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
text-decoration: 文本的装饰
- none 默认。
- underline 下划线。
- overline 上划线。
- line-through 中线。
text-shadow：文本阴影
- 第一个参数是左右位置
- 第二个参数是上下位置
- 第三个参数是虚化效果
- 第四个参数是颜色
- text-shadow: 5px 5px 5px #888;
word-wrap：自动换行
- word-wrap: break-word;

　　5. 列表属性

　　list-style-type: 列表项标志的类型

none 去除标志
decimal-leading-zero; 02.
square; 方框
circle; 空心圆
upper-alph; & disc; 实心圆

　　list-style-image：将图象设置为列表项标志

　　list-style-position：列表项标志的位置

inside
outside

　　 list-style：缩写

　6. 边框

　　border-style：边框样式

solid 默认，实线
double 双线
dotted 点状线条
dashed 虚线

　　 border-color：边框颜色

　　border-width：边框宽度

　　　　border-radius：圆角

1个参数：四个角都应用
2个参数：第一个参数应用于左上、右下；第二个参数应用于左下、右上
3个参数：第一个参数应用于左上；第二个参数应用于左下、右上；第三个参数应用于右下
4个参数：左上、右上、右下、左下（顺时针）

　　border: 简写

border: 2px yellow solid;

　　 box-shadow：边框阴影

第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
box-shadow: 10px 10px 5px #888;

　　7、display

none 不显示。
block 显示为块级元素。
inline 显示为内联元素。
inline-block 行内块元素（会保持块元素的高宽）。
list-item 显示为列表元素。

　　8、盒子模型

　　什么是盒子模型？

　　padding:用于控制内容与边框之间的距离;

　　margin: 用于控制元素与元素之间的距离;

　　一个参数，应用于四边。

　　两个参数，第一个用于上、下，第二个用于左、右。

　　三个参数，第一个用于上，第二个用于左、右，第三个用于下

　　边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），解决办法

 body {

     margin:;

 }

　　9、float

　　让一行显示两个块级标签，会脱离文档流

none
left 左浮动
right 右浮动

　　clear 清除浮动：

none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许两边有浮动对象

　10、position

　　1 static，默认值 static：无特殊定位，对象遵循正常文档流。

top，right，bottom，left等属性不会被应用。说到这里我们不得不提一下一个定义——文档流，文档流其实就是文档的输出顺序，也就是我们通常看到的由左到右、由

　　上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文档流脱离出来显示。默认值就是让元素继续按照

　　文档流显示，不作出任何改变。

　　2 position:relative

relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。如果设定 position:relative，就可以使用

　　top,bottom,left和 right 来相对于元素在文档中应该出现的位置来移动这个元素。[意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置

　　移动了] 当指定 position:absolute 时，元素就脱离了文档[即在文档中已经不占据位置了]，可以准确的按照设置的 top,bottom,left 和 right 来定位了。如果一个元素绝对

　　定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止。

　　3 position:fixed

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

　　fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定

　　义。注

　　意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位

　　流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

　　通过以下四种属性进行定位：　　

left
top
right
bottom
z-index

css知识点整理的更多相关文章

CSS 知识点整理
本文是我整理的关于CSS的部分基础知识点,适合正在准备前端工作面试的人做简单回顾. 1. 盒子模型 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. Mar ...
17个CSS知识点整理
1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率:使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快:内容能被更多的用户所访问.内容能被更 ...
CSS知识点整理（1）：CSS语法，层叠次序，选择器，其他重要方面。
1. css的全称 2. CSS的层叠次序:优先级由低到高 ·浏览器设置 ·外部样式表或者内部样式表 —— 就近原则 ·内联样式 3. CSS的3种形式,以及每种形式的语法格式 ——注意样式表的为 ...
CSS知识点整理(2):框模型，定位
1. 框模型:Box Model 规定了元素处理元素框处理元素内容.外边距.边框.内边距的方式. 2. 当边距给定的值可以小于4个.CSS定义了一些规则.处理这中情况: 如果缺少左外边距的值,则使用 ...
css入门知识点整理
css入门知识点整理不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...
HTML&&CSS基础知识点整理
HTML&&CSS基础知识点整理一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...
vue前端面试题知识点整理
vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
web前端面试知识点整理
一.HTML5新特性本地存储 webStorage websocket webworkers新增地理位置等API对css3的支持canvas多媒体标签新增表单元素类型结构标签:header nav ...
这些HTML、CSS知识点，面试和平时开发都需要 No1-No4
系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

随机推荐

超千个节点OpenStack私有云案例（1）：CERN 5000+ 计算节点私有云
CERN:欧洲核子研究组织本文根据以下几篇文章整理而来: https://www.openstack.org/summit/tokyo-2015/videos/presentation/unveil ...
Hello Jexus
一.关于 CentOS CentOS(Community Enterprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise Linux依照 ...
Hadoop2 自己动手编译Hadoop的eclipse插件
前言: 毕业两年了,之前的工作一直没有接触过大数据的东西,对hadoop等比较陌生,所以最近开始学习了.对于我这样第一次学的人,过程还是充满了很多疑惑和不解的,不过我采取的策略是还是先让环 ...
ABP配套代码生成器(ABP Code Generator)帮助文档，实现快速开发
ABP代码生成器介绍针对abp这个框架做了一个代码生成器,功能强大.分为两大功能点,一个是数据层,一个是视图层. 数据服务层:通过它,可以实现表设计.领域层初始化.多语言.automapper自动注 ...
springmvc的图片上传与导出显示
1.前端文件上传需要在form表单内添加enctype="multipart/form-data" ,以二进制传递: 2.web.xml文件内配置 <servlet-mapp ...
es6学习笔记
class Point { constructor(x, y) { this.x = x; this.y = y; } static classMethod() { console.log('fath ...
Asp.Net Mvc通用后台管理系统,bootstrap+easyui+权限管理+ORM
产品清单: 1.整站源码,非编译版,方便进行业务的二次开发 2.通用模块与用户等基础数据的数据库脚本 3.bootstrap3.3.1 AceAdmin模板源码 4.easyui1.3.5源码 5.F ...
JavaScript权威设计--JavaScript变量，作用域，声明提前(简要学习笔记四)
1.宿主对象与宿主环境宿主对象:由ECMAScript实现的宿主环境提供的对象,可以理解为:浏览器提供的对象.所有的BOM和DOM都是宿主对象. 宿主环境:一般宿主环境由外壳程序创建与维护,只要 ...
设置MYSQL允许用IP访问
mysql>use mysql; mysql>update user set host = '%' where user ='root'; mysql>flush privileg ...
Deep learning：五十一(CNN的反向求导及练习)
前言: CNN作为DL中最成功的模型之一,有必要对其更进一步研究它.虽然在前面的博文Stacked CNN简单介绍中有大概介绍过CNN的使用,不过那是有个前提的:CNN中的参数必须已提前学习好.而本文 ...

css知识点整理

css知识点整理的更多相关文章

随机推荐

热门专题