CSS小结

一、
1. css必须写在<head></head>里面的<style></style>里面

2. css 由选择器 + 规则组成, 规则由属性和值组成 ,格式示例:div{color:red;}

3. 常用的选择器有:标签选择器(类型选择器)、class选择器(类选择器)、id选择器、后代选择器、 组合选择器和并列选择器等等

4. class选择器与id选择器的区别是,class可以样式重用,而id不行,因为id就像是人的身份证,是唯一的

5.层居中的要决:1、有宽度 2、左右外补丁要为auto 例如div{width:200px; margin:auto;}

6.边框三要素:颜色 大小 形状 例如 div{border:#F00 1px solid;}

7.高度=行高,字就可以垂直居中 例如div{height:200px; line-height:200px;}

8. 标签还可以分为行内标签和块级标签,行内标签的占用空间取决于内容(例如 a、span),块级标签不管内容多与少都会占用一整行(例如 div、 p)。由于行内标签一般不支持

width、height,所以排版过程中都会用块级标签来布局;如果有需要时,可以将行元素转换为块元素。

9.如果需要块级标签排版在同一行,只需要给它们都加上float:left的规则即可

10.背景图默认会平铺(也叫重复),如果想背景图水平居右,垂直居中,不重复的话,可以写background:url(bg.jpg) right center no-repeat

11.外部文件用<link href="XXX.css"  rel="stylesheet" type="text/css" />

12.优先级算法: 选择器的总分数高,优先级就高。 100分/id选择器     10分/class 选择器    1分/标签选择器    分数相等的,后面的覆盖前面的(就近原则)

13.清除浮动有四种常用的方法
   1)给父亲层加一个子层<div class="clear"></div>  其中 .clear{clear:both;}
    缺点:多一个空节点
   2)给父亲层加一个高度
    缺点:不适合内容高度不确定的情况
   3)给父亲层加一个float属性
    缺点:不适合父亲层需要居中的情况
   4)给父亲层加 overflow:hidden; _height:1%;
    缺点:_height:1%;的写法不符合W3C规范

14.一个标签(容器)与另外一个标签之间的距离,要靠外补丁margin来实现,而一个标签内部如果有多行文本,每行文本之间的距离要靠行高line-height来实现

15.行高的特点是文本的上下空白会相等,因此当一个容器里面只有一行文本,容器的height等于line-height时,文本便可以垂直居中

时间: 2024-10-26 14:22:10

CSS小结的相关文章

2015第10周四-CSS小结

这两天做前台页面发现个人在CSS前端方法很多基础知识都忘了,晚上又搜索学习了下,把相关内容摘录总结. CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {declaration1; declaration2; ... declarationN } 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样式属性(style attribute).每个属性有一个值.属性和值被冒号分开. selector

ASP.NET CSS 小结

1.ASP.NET 引用CSS 1.Site.master里面设置webopt <webopt:bundlereferencerunat="server"path="~/Content/css"/> 2.在Bundle.config里面绑定具体CSS <?xml version="1.0" encoding="utf-8"?> <bundlesversion="1.0">

html及css小结

1. HTML常用标签 1.1 <meta> META标签是HTML标记HEAD区的一个关键标签,提供文档字符集.使用语言.作者等基本信息,以及对关键词和网页等级的设定等,最大的作用是能够做搜索引擎优化(SEO). 两个主流网站meta属性 <!-- 淘宝 --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,c

HTML+CSS小结

WEB标准构成: 结构   HTML 样式   CSS 行为   JavaScript(交互行为) html代码规范: 声明doctype UTF-8 标签缩进 标签小写 注释 <!doctypt html> <meta charset="utf-8" /> <meta name="参数" content="name属性值"/> <meta name="keywords" conten

CSS 小结

去掉下划线: text-decoration:none; 去掉li的圆点: list-style:none; 字体加粗: font-weight:bold; 文本居右: text-align:right; 链接手指状: cursor:pointer; display用法: display:inline;//在同一行显示 display:block;//在新的一行上显示 display:inline-block;

移动端CSS小结

Meta 标签 <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> 移动端页面添加 meta 标签,可以让文档的宽度与设备的宽度保持1:1,文档的最大宽度比例是1.0,不允许用户点击屏幕放大浏览.   禁止 iOS 自动识别电话和 Android 自动

按钮靠右css小结

按钮靠右 style="float:right"  ,多按钮排版会相反 按钮内的字体靠右 style="text-align:right" 按钮离右边框距离 style="margin-right: 20px"

CSS使用示例

CSS的存在就是将网页的内容与内容展示的方式进行了分离. 使用CSS的方式有好几种,最常用的是通过引入外部CSS文件进行使用 HTML <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>链接外部CSS样式</title> <link href="00_CSS使用示例.css" re

html / css学习笔记-3

css小结 1.css包含一些简单语句,成为规则 2.每个规则为选择器的一些html元素提供样式 3.典型的规则包括一个选择器,以及一个或多个属性和值 4.选择器指定规则将应用到那些元素 5.每个属性声明以一个分号结束 6.规则中的所有属性和值都放在{}大括号之间 7.可以使用元素名作为选择器,来选择任意元素 8.通过用逗号分隔元素名,可以一次选择多个元素 9.要在html中包含一个样式,最容易的办法就是使用<style></style> 标记 10.对于html以及相当复杂的网站