CSS基础笔记

CSS(Cascading Style Sheets),层叠样式表。


基本格式

选择器 {
    属性:值;
}

CSS注释

/*  注释内容  */

引入样式表

行内样式表(内联样式)

通过标签的style属性设置元素样式

<标签名 style="属性:值;属性:值;">内容</标签名>
内部样式表(内嵌式)

将CSS代码集中写在head标签内,用style标签定义

<head>
    <style type="text/css">  <!-- type在html5中可省略 -->
        选择器 {属性:值;属性:值;}
    </style>
</head>
外部样式表(外链式)

将CSS代码放在后缀为css的外部样式表文件中,在HTML的head标签中,用link标签链接外部样式表文件

<head>
    <link href="url地址" type="text/css" rel="stylesheet" />
</head>

选择器

标签选择器(元素选择器)

使用HTML标签名称作为选择器

类选择器

使用"."(英文句号)进行标识,后面跟着类名,如: .classname

标签调用时添加属性class="类名"

注意:

  • HTML使用多个类选择器时,显示效果与类名先后顺序无关,而与CSS书写顺序有关
  • 不建议使用”_"下划线命名
  • 不建议纯数字和中文命名
  • 可参考《Web前端开发规范手册》
id选择器

使用“#“标识,后面紧跟id名

  • W3C标准规定,同一个页面内,不允许有相同id的对象,但允许有相同class的对象
通配符选择器

用”*“表示,能匹配页面中所有的元素

伪类选择器

链接伪类选择器:

  • :link 未访问的链接

  • :visited 已访问的链接

  • :hover 鼠标移动到链接上时

  • :active 选定的链接

    注意,书写时顺序尽量不要颠倒

结构(位置)伪类选择器(CSS3):

  • :first-child 属于其父元素的第一个子元素
  • :last-child 属于其父元素的最后一个子元素
  • :nth-child(n) 指定属于其父元素的第n个子元素,n可以是数字、关键词、公式
  • :nth-last-child(n) 指定属于其父元素的倒数第n个子元素

目标伪类选择器:

:target 选取当前活动的目标元素

复合选择器

交集选择器

更精确地定义

标签选择器.类选择器 {属性:值;}
并集选择器

定义共同拥有的属性

选择器,选择器 {属性:值;}
后代选择器

包含深层全部

外层 内层 {属性:值;}
子元素选择器

只选择子元素而不包含更深层的

父元素 > 子元素 {属性:值;}

属性选择器

选择器[属性] {属性:值;}
选择器[属性=值] {属性:值;}  /* 值完全相同的 */
选择器[属性*=值] {属性:值;}  /* 任意位置有该值的 */
选择器[属性^=值] {属性:值;}  /* 起始位置有该值的 */
选择器[属性$=值] {属性:值;}  /* 结束位置有该值的 */

伪元素选择器

  • ::first-letter 文本的第一个字或词
  • ::first-line 文本第一行
  • ::selection 选中文本时的样式
  • ::before 元素内部开始位置创建一个元素并选择
  • ::after 元素内部结束位置创建一个元素并选择

标签显示模式

块元素(block-level)

如<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

  • 总是从新行开始
  • 宽度默认是容器的100%
  • 高度、行高、外边距及内边距都可以控制
  • 可以容纳内联元素和其他块元素
行内元素(inline-level)

如<a>、<strong>、<b>、<em>、<i><del>、<s>、<ins>、<u>、<span>等

  • 和相邻元素在一行
  • 高、宽无效、水平方向的padding和margin可以设置,垂直方向无效
  • 默认宽度为内容宽度
  • 只能容纳文本或其他行内元素
行内块元素(inline-block)

如<img />、<input />、<td>

  • 和相邻元素在一行
  • 高、宽、外边距、内边距都可以设置
  • 默认宽度为内容宽度
标签显示模式切换

display属性:

  • block(行内转块)
  • inline(块转行内)
  • inline-block(块、行内转行内块)

字体样式属性

font-size:字号
单位 说明
em 相对于当前对象内文本的字体尺寸
px 像素
绝对长度单位 说明
in 英寸
cm 厘米
mm 毫米
pt
font-family:字体
font-weight:字体粗细

可用值normal(400)、700(bold)、bolder、lighter、数字

font-style:字体风格

可用值normal(默认值)、italic(倾斜)、oblique(倾斜)

font:综合设置字体样式
选择器 {font: font-style font-weight font-size/lin-height font-family;)
  • 使用font属性时,值的顺序不能更换,中间用空格隔开
  • 不需要设置的可以省略,但必须保留font-size和font-family,否则font属性不起作用
常用技巧:
  • 现在网页普遍使用14px+
  • 尽量使用偶数字号,ie6等老式浏览器对奇数会有bug
  • 尽量使用系统默认字体,当浏览器不支持第一个字体时会尝试下一个字体
  • 当不支持字体的中文写法时,可用英文写法或者unicode写法

外观样式

color:颜色
  1. 预设颜色,如red、blue、pink
  2. 十六进制,如#DDDDDD
  3. RGB形式,rgb(255,255,255)或rgb(100%,0,0)
  4. 颜色透明,rgba()
line-height:行间距

常用单位有像素px,相对值em,百分比%

text-align:水平对齐方式

常用值:left(默认),center,right

text-indent:首行缩进

建议使用单位em

letter-spacing:字间距
word-spaing:单词间距
text-shadow:文字阴影

水平距离 垂直距离 模糊距离 颜色

  • 前两个参数必须有,后两个参数有默认值
text-decoration: 装饰效果

none \ underline \ overline \ line-through

背景样式

  • background-color: 背景颜色
  • background-image: 背景图片,url(url地址)
  • background-repect: 是否平铺,repeat-x \ repeat-y \ repeat \ no-repeat \ round \ space,默认repeat
  • background-attachment: 固定还是滚动,fixed \ scroll,默认scroll
  • background-position: 位置,top \ center \ bottom \ left \ center \ right \ 百分比 \ 长度值,默认top left
  • background: 背景颜色 背景图片 平铺 滚动 位置 ,顺序无规定
  • rgba颜色可设置透明
  • background-size: 设置尺寸,宽高 \ cover \ contain
  • 多背景图片,一个元素可以设置多重背景图,每组background用 , 分隔,前面的背景图层次较高

CSS书写规范

  1. 选择器与 { 之间包含空格
  2. 属性名与 : 之间不包含空格,: 与值之间包含空格
  3. 包含多个选择器时,每个选择器独占一行
  4. 选择器嵌套层级尽量不大于3级
  5. 每个属性定义另起一行
  6. 属性定义以 ; 结尾
  7. 更详细的看规范手册

CSS三大特性

层叠性
  • 出现样式冲突时,按书写顺序,以最后的样式为准
继承性
  • 子标签会继承父标签的某些样式,如字体、字号、颜色、行距等与文字类有关的
  • 不继承的有:边框、外边距、内边距、背景、定位、元素高等与块有关的
特殊性

specificity用一个四位的数字串(0,0,0,0)表示,左面最大,一级大于一级,数位之间没有进制

  • 元素(标签) (0,0,0,1)
  • 类、伪类、属性 (0,0,1,0)
  • ID (0,1,0,0)
  • 行内样式 (1,0,0,0)
  • !important +∞ 属性:值!important;
  • 继承的权重为0
  • 权重相同时按顺序,最后的为准

盒子模型

border:边框
  • border: border-width border-style border-color

  • border-width: 边框宽度

  • border-style:

    常用属性值:none(无,默认)、solid(单实线)、dashed(虚线)、dotted(点线)、double(双实线)

  • border-collapse: collapse 边框合并

  • border-radius: 圆角半径

padding: 内边距
margin: 外边距
  • 宽度属性width和高度属性height仅适用于块元素,对行内元素无效(除img和input)
  • 外边框会合并
  • 没有给定宽高时,padding不会影响盒子大小

CS3盒子模型

box-sizing: 指定盒模型
  • content-box 默认值,盒子大小为width+padding+border
  • border-box 盒子大小为width,即width包含padding和border
box-shadow: 盒子阴影
  • h-shadow v-shadow blur spread color inset
  • 水平位置(必需) 垂直位置(必需) 模糊距离 阴影尺寸 颜色 外部阴影(outset)转为内部阴影

浮动

普通流(标准流或文档流)

上到下,左到右,块元素占一行

float: 浮动

left right none(默认)

  • 浮动会使元素具有行内块特性
clear: 清除浮动

left right both 不允许左侧、右侧、左右侧有浮动元素

  1. 额外标签法:在浮动元素末尾添加一个空标签包含clear:both;

  2. 父级元素添加overflow属性方法:在父级元素添加overflow: hidden;或值为auto\scroll都可以

  3. 使用after伪元素:

    .类名:after {  /* 一般类名为clearfix */
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    .类名 {*zoom: 1;}  /* IE6、7专用 */
    
  4. before和after双伪元素:

    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {clear: both;}
    .clearfix {*zoom: 1;}
    

版心

指网页中主题内容所在的区域

布局流程

  1. 确定页面的版心
  2. 分析行模块和列模块
  3. 制作HTML和CSS
  4. CSS初始化

定位

  • 定位模式:static、relative、absolute、fixed
  • 边偏移:top、bottom、left、right
static(静态定位)
relative(相对定位)

相对在文档流的位置定位,在文档流中的位置保留

absolute(绝对定位)

相对最近的已定位父元素定位,所有父元素没定位时,以body定位,不保留原位置

fixed(固定定位)

相对浏览器定位,不保留原位置

  • 固定定位没有内容时,需要指定宽高
  • 居中,例如:left: 50%; margin-left: 半宽;
  • 行内元素添加绝对定位、固定定位、浮动后,会自动转换为行内块模式

叠放次序(z-index)

  • 默认值为0,取值越大,越居上,可以为负数
  • 值相等时,按书写顺序,后来居上
  • 只有相对定位、绝对定位、固定定位有此属性

元素的显示和隐藏

display: 显示
  • none 隐藏,不保留位置
visibility : 可见性
  • visible 可见
  • hidden 隐藏,保留位置
overflow: 溢出
  • visible 默认
  • auto 超出就显示滚动条
  • scroll 一直显示滚动条
  • hidden 超出部分隐藏

CSS用户界面样式

cursor: 鼠标样式

default、pointer、move、text等

outline: 轮廓
  • outline-width outline-style outline-color
  • 去除轮廓线,outline: 0;
resize:
  • 防止拖拽文本域,resize: none;
vertical-align: 垂直对齐
  • baseline、top、middel、bottom
  • 对块元素无效,对行内元素或行内块元素有效
  • 常用于图片、表单、文字的对齐
  • 去除图片底侧缝隙

溢出的文字隐藏

work-break: 自动换行
  • normal break-all(允许在单词内换行) keep-all(只能在半角空格或连字符处换行)
  • 主要处理英文单词
white-space: 文本显示方式
  • normal nowrap(强制同一行内显示所有文本)
text-overflow: 文字溢出
  • clip ellipsis(溢出时显示省略标记...)
  • 前提是设置了强制一行内显示

CSS精灵技术(sprite)

本质就是将一些背景图像整合到一张大图中,通过background-position定位

字体图标

  1. UI人员设计字体图标效果图(svg)
  2. 前端人员上传生成并下载兼容性字体文件包
  3. 引入字体文件包到HTML页面

滑动门

利用sprite技术和padding实现

  1. 外框显示左门,用padding-left撑开背景
  2. 内框显示左门以右所有,用padding-right撑开背景

过渡

transition: 属性 时间 运动曲线 延迟;

  • transition-property 可用all指定所有属性
  • transition-duration 默认0
  • transition-timing-function ease(默认)、linear、ease-in、ease-out、ease-in-out
  • transition-delay 默认0

2D转换

transform: 方法
  • translate()方法 位移,长度或百分比(按自身)
  • rotate()方法 旋转,角度deg
  • scale()方法 缩放或放大
  • skew()方法 翻转
  • matrix()方法
transform-origin: 调整元素转换变形的原点

3D转换

transform: 方法
  • translate3d()方法
  • rotate()方法
perspective: 透视,视距长度
backface-visibility: 元素不面向屏幕时是否可见,hidden

动画

animation: 动画名称 时间 运动曲线 何时开始 播放次数 是否反向
  • animation-name: 引用@keyframes动画的名称
  • animation-duration: 完成一个周期的时间,默认0
  • animation-timing-function: 运动曲线,默认ease
  • animation-delay: 延迟开始,默认0
  • animation-iteration-count: 播放次数,默认1,无限次为infinite
  • animation-direction: 是否反向,normal(默认)、reverse(反向)、alternate(先正常再反向)、alternate-reverse
  • animation-play-state: 运行状态,默认running,暂停为paused
  • animation-fill-mode:
定义动画
@keyframes 动画名称 {
    from {属性:值}  /* 0% */
    to {属性:值}  /* 100% */
}
或
@keyframes 动画名称 {
    0% {属性:值}
    14% {属性:值}
    100% {属性:值}
}

伸缩布局(CSS3)

  • display: flex; 设置为伸缩布局模式
  • flex: 份数;
  • max-width\min-width:
  • flex-direction: 指定排列方式,默认水平方向row,垂直方向column
justify-content: 调整主轴对齐
  • flex-start 默认值,位于容器开头
  • flex-end
  • center 居中
  • space-between 元素之间空白填充
  • space-around 元素前后空白填充
align-items: 调整侧轴对齐
  • stretch 默认值,子元素没高度时,拉伸使适用父容器
  • flex-start、flex-end、center
flex-wrap: 控制是否换行,当子元素宽度多于容器
  • nowrap 默认值
  • wrap
  • wrap-reverse
align-content : 垂直对齐
  • stretch 默认值
  • flex-start、flex-end、center、space-between、space-around
order: 子元素排列顺序,整数值

BFC(块级格式化上下文)

一个隔离的独立容器

触发BUFC:
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block、table-cell、table-caption、inline-flex
  • overflow不为visible(没有副作用)
BFC特性:
  1. 盒子从顶端开始垂直地接个排列
  2. 盒子垂直方向距离由margin决定,同一个BFC的相邻盒子margin会重叠
  3. BFC中每个盒子的margin-left(或margin-right)会触碰到容器的border-left(border-right)
  4. BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘
  5. 计算BFC的高度时,会检测浮动的盒子高度
BFC用途:
  1. 清除元素内部浮动(利用特性5)
  2. 使用不同的BFC,解决外边距合并问题(利用特性1、特性2)
  3. 制作右侧自适应的盒子(利用特性4)

浏览器前缀

  • -webkit- Chrome、Safari、Android Browser
  • -moz- Firefox
  • -o- Opera
  • -ms- Internet Explorer、Edge
  • -khtml- Konqueror

W3C统一验证工具

http://validator.w3.org/unic.com/

CSS压缩工具

站长之家:http://tool.chinaz.com/Tools/CssFormat.aspx

CSS Rest类库

normalize.css 用于初始化css文件
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容

  • CSS 指层叠样式表(Cascading Style Sheets),是一种用来为结构化文档(如 HTML 文档或...
    神齐阅读 2,073评论 0 14
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,815评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,300评论 0 11
  • 引入 外部样式表 内部样式表 内嵌样式 此方式不利于后期维护,较少使用此方法。 语法 选择器属性声明=属性名:属性...
    小豸阅读 1,182评论 0 51
  • css笔记总结 1.CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 选择器通常是您需要改变样式的 ...
    一生有你_c480阅读 450评论 1 1