CSS学习笔记

Posted on Edited on In

CSS基础

书写方式： CSS属性: 属性值;

1. CSS 类命名规则

公共命名规则

CSS样式命名 说明
wrapper 页面外围控制整体布局宽度
container或content 容器,用于最外层
layout 布局
head, header 页头部分
foot, footer 页脚部分
nav 主导航
subnav 二级导航
menu 菜单
submenu 子菜单
sideBar 侧栏
sidebar_a, sidebar_b 左边栏或右边栏
main 页面主体
tag 标签
msg message 提示信息
tips 小技巧
vote 投票
friendlink 友情连接
title 标题
summary 摘要
loginbar 登录条
searchInput 搜索输入框
hot 热门热点
search 搜索
search_output 搜索输出和搜索结果相似
searchBar 搜索条
search_results 搜索结果
copyright 版权信息
branding 商标
logo 网站LOGO标志
siteinfo 网站信息
siteinfoLegal 法律声明
siteinfoCredits 信誉
joinus 加入我们
partner 合作伙伴
service 服务
regsiter 注册
arr/arrow 箭头
guild 指南
sitemap 网站地图
list 列表
homepage 首页
subpage 二级页面子页面
tool, toolbar 工具条
drop 下拉
dorpmenu 下拉菜单
status 状态
scroll 滚动
.tab 标签页
.left .right .center 居左、中、右
.news 新闻
.download 下载
.banner 广告条(顶部广告条)

其他DIV命名规则

　　登录条:loginBar

　　标志:logo

　　侧栏:sideBar

　　广告:banner

　　导航:nav

　　子导航:subNav

　　菜单:menu

　　子菜单:subMenu

　　搜索:search

　　滚动:scroll

　　页面主体:main

　　内容:content

　　标签页:tab

　　文章列表:list

　　提示信息:msg

　　小技巧:tips

　　栏目标题:title

　　友情链接:friendLink

　　页脚:footer

　　加入:joinus

　　指南:guild

　　服务:service

　　热点:hot

　　新闻:news

　　下载:download

　　注册:regsiter

　　状态:status

　　按钮:btn

　　投票:vote

　　合作伙伴:partner

　　版权:copyRight

2. 选择器

基础选择器

选择器按作用大小（从小到大）分为 ID选择器(使用井字符做特殊标注：#) 、类选择器（使用英文点号做特殊标注：.） 、 标签选择器 及 通配符选择器（使用英文星号做特殊标注：*）。

选择器类型 选择器特性 style书写方式 style应用方式
ID选择器 1. 与其他选择器类型一致，特殊之处是大部分情况作JavaScript调用
2. 需要编写唯一id不可重复使用		 #DivStyle { color: red; } id="DivStyle"
类选择器 1. 作用于使用class属性的一类标签，同面向对象的其他语言特性一致
2. 单个标签可以使用多个类，中间以空格隔开		 .ClassStyle { color: black;} Class="ClassStyle ....."
标签选择器 作用于所有使用本标签的标签 div { color: blue; } /
通配符选择器 作用于所有标签 * { clolor: pink; } /

复合选择器

复合选择器类型 选择器特性 style书写方式
后代选择器 1. 可以选择某个父标签下的某个全部子标签，不管其是否在同一个层级
2. 当标签发生嵌套时，内层标签就称为外层标签的后代
3. 浏览器按照标签层级的关系进行查找，并对最内层标签进行修改，因此可以定义多重标签选择，如可以使用基础选择器（类选择器及ID选择器）进行组合使用
4. 内外层选择器之间 以空格隔开		 外层标签 内层标签 {属性}
ol li { color: #000; }
ol li a { color: #777; }
.nav li a { color: pruple;}
子代选择器 1. 即与后代选择器不同，仅对父级标签下的某一类选择器进行操作，不会作用于其他子代的同类标签
2. 使用符号 > 进行操作		 .nav>a {color: pink;}
集选择器（相邻选择器） 1. 在两个没有从属关系（子代或后代）和相同特点（如同类标签）的同级不同类标签中，定义一个相同的样式
2. 多个标签进行选择时使用英文逗号 , 进行并列选择
3. 并集选择器内可使用 简单选择器 和 复合选择器（如 后代选择器 和 子代选择器），竖向书写选择器		 div, p {color: pink; }
伪类选择器 1. 用于给某些选择器添加特殊效果（如给链接添加特殊效果），或者选择某个元素
2. 结构伪类、链接伪类、表单伪类
3. 伪类选择器其实更像是一个行为选择器（或状态选择器），它定义了一个/类标签在不同状态下的样式，书写形式如：标签: 状态/行为 {属性}		 .OnlineTitle:link {
color: #222222;
text-decoration: none;
}

并集选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML>
<!--
如要求将下方熊大、熊二及佩奇一家都改为粉色，则按照<style>中的方式进行书写
-->
<html>
    <head>
        <style>
            //在两个没有从属关系（子代或后代）和相同特点（如同类标签）的同级不同类标签中，定义一个相同的样式
            div,
            p,
            .pig li {                //类选择器
                color: pink;
            }
        </style>
    </head>
    <body>
        <div>熊大</div>
        <p>熊二</p>
        <span>关头强</span>
        <ul class="pig">
            <li>PIG 1</li>
            <li>PIG 2</li>
            <li>PIG 3</li>
        </ul>
    </body>
</html>

链接伪类选择器

四个使用方式: link / visited / hover / active

  1. 为了确保生效，应按照LVHA的顺序进行声明。
  2. <a> 链接在浏览器中具有默认样式，不会因为在<body>中而随之改变，实际工作中需要给链接单独指定样式。
  3. 使用时，加上冒号 : 与 四种状态之一 即可

举例：

1
2
3
4
a:hover
{ 
	background-color:yellow;
}

当鼠标经过父级元素时，显示子元素的遮罩层：

1
2
3
.tudou:hover .mask {
	display: block;      /* 显示遮罩层 */
}

最小盒子：即只能存放文字了，不能再存放其他标签/元素，如 <p>、<h1>等文字块级标签；

元素显示模式

是指在页面上的元素以 块状模式 、 行内模式 或 行内块模式 进行显示。元素按显示模式可以分为 块状（级）元素 及 行内元素（内联元素） 及 行内块元素 三种类型。

元素类型 典型标签 特点 注意点
块状元素 <h1>~<h6> 、 <p>、 <div>、<ul>、<ol>、<li>...... 1. 即使设置标签宽度，也是独占一行
2. 高、宽、外边距及内边距可调节
3. 默认宽度是父级宽度的100%
4. 是一个容器及盒子，可以放任何标签		 文字类的标签内不可以存放块元素
行内元素（内联元素） <a>、 <strong>、<b>、 <em>、<i> ...... 1. 相邻行内元素在一行上，一行可以显示多个
2. 直接设置宽高无效，可以间接设置
3. 默认宽度就是其内容宽度
4. 行内元素只能容纳文本及其他行内元素		 1. 链接中不允许再放其他链接
2. <a>中可以放置块元素，但是转换成块级元素最安全
行内块元素 <input>、 <image>、<td>...... 1. 同时具有块元素及行内元素的特定
2. 和相邻行内元素（行内块）在一行上，但是有空白缝隙，可以一行显示多个
3. 默认宽度即内容宽度
4. 高度、行高、外边距及内边距可控制

元素显示模式的转换

即一个模式的元素需要另一个模式的特性，可以通过在CSS的标签样式属性中添加display语句进行转换。

转换为块级元素： display: block;

转换为行内元素： display: inline;

转换为行内块元素： display: inline-block;

权重

选择器类型 权重
继承 无
通配符选择器、子代选择器、相邻选择器（并集选择器） 0,0,0,0
元素选择器、伪元素选择器 0,0,0,1
类选择器、伪类选择器、属性选择器 0,0,1,0
ID选择器 0,1,0,0
内联选择器 1,0,0,0
!IMPORTANT 无限

选择器的加权结果并非二进制，而是在各个数位上进行单独相加，例如元素选择器与类选择器的加权结果为 0,0,1,1，左侧数位的数值越大，权重越高。

3. List

list-style CSS 属性是一个简写对属性集合，包括list-style-type, list-style-image, 和 list-style-position。

list-style: none | circle | square inside ;表示<ul> 下 <li> 前的小点样式，如“无、圆圈、实心方形”。

例如：

1
2
3
4
5
6
7
8
9
10
11
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

及

1
2
3
4
5
6
7
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

4. Background

background-color 可以设置为 transparent，即透明的，不可视的。

background-image 可以设置为 none，也可以跟上一个 url() 链接。如：background-image: url(http://xxxxxx.com/123.jpg)

background-repeat: repeat | no-repea | repeat-x | repeat-y ，分别是指 重复（平铺）、不平铺、在x轴上平铺 及 在y轴上平铺 。

background-position: top | bottom | left | right | center; 除了可以使用类似于左侧的方位词定位，还可以使用坐标轴数值定位。

5. Font

FONT-FAMILY 字体族

通用属性之一，用于设置网页显示字体，font-family的使用方式为 font-family=" " ，双引号内可以书写多个字体，引擎会按顺序搜索本地字体并使用，如果都没有则使用本地字体。

注意：建议使用字体的全英文进行书写，如 微软雅黑 全英文为 Microsoft YaHei，英文书写时有空格的应用单引号‘’ 进行包裹。

FONT-SIZE 字体大小

通常用于对body标签内所有正文字体大小的设置，对标题（如h3）大小的设置仍需另起样式。

复合写法

font: font-style font-weight font-size/line-height font-family;

font-size 和 font-family 不可缺省

6. Text

文本属性

属性 书写方式 注意
color
颜色		 1. 常见英文表示法，直接书写该颜色英文即可，如 pink  red  blue  purple
2. 16进制表示法，用#号进行书写，如#FF00FF
3. RGB表示法，如rgb(0,0,255)		 16进制简写为#fff
实际开发中用16进制
text-align
文本对齐		 仅有左、中、右三种表示方式，用英文 left  center  right 进行书写
text-indent
文本缩进		 缩进可以用2种方式表示：
1. 精准缩进：即直接使用 px 单位进行书写，表示缩进多少像素点，缺点是容易出现问题
2. 字符单位缩进：即按照字符大小，自适应缩进字符距离，单位是em，如 2em，可以缩进2个字符
text-decoration
文本修饰		 常见的修饰类型有四种：无（none）、上划线（overline）、下划线（underline）、删除线（line-through）
line-height 行高=上行距+下行距+字高，且上行距=下行距

7. Box Module

盒子模型主要分三部分：border（边框）、padding（内边距）及 margin（外边距）。

Border

边框主要有一下三种参数：粗细、颜色及样式

  • 粗细(border-width: 5px;)
  • 颜色(boder-color: #555) （注意：如果这个值没有设置，它的默认值是元素的 color属性值（是文字颜色而非背景色）），可以定义为transparent（透明的）
  • 样式(boder-style: none | hidden | dotted | dashed | solid | double(双层线) | groove(内雕刻) | ridge(外浮雕) | inset(内凹陷) | outset(外凹陷) )

border属性之可以在中间添加上、下、左、右四个方位词和三参数之一，如 border-top-color | border-bottom-style ....

边框使用时会影响盒子大小，需要注意调整。

复合写法

border: [border-width ||border-style ||border-color |inherit] ;

Padding

内边距涉及到的参数包括 上下左右四边的边距。

在未设置内盒子的width时，设置padding对内盒子实际显示大小不起影响，一旦设置width，则会让盒子的width在显示时超过设置参数的大小。

Margin

外边距同内边距。

在标准流下，设置块级盒子width参数后，设置margin左右为auto，可以让盒子实现居中效果。（以下三种写法，推荐第一个，第一个参数表示上下，第二个参数表示左右）

margin: 0 auto;

margin: auto;

margin-left: auto; margin-right: auto;

Q/A

盒子塌陷的解决方案

以下为两个盒子嵌套，同时设置上边距导致塌陷问题的解决方案：

  • 可以为父元素定义上边框/上内边距
  • 可以为父元素添加 overflow: hidden;
  • 利用浮动、固定、绝对定位解决

8. Float

浮动最初的开发目的是让图片和文字产生环绕效果的，浮动可以让多个块级元素在一行内显示。

float: none | left | right;

注意：两个行内块元素中间会有空白间隙存在，如果父级元素设定了宽度，会让元素存放不下。需要给此类行内块元素设定浮动

浮动特性：

  • 脱标

  • 顶端对齐

  • 具有行内块元素特性

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

在标准流中嵌套一个带有外边距的浮动框，不会让他们产生外边距合并。

9. Clean Float

清除浮动也叫闭合浮动，是指在未指定父级元素高度而子级元素为浮动时，会对父级元素同级的标准流造成影响，因而需要清除该类浮动造成的弊端的情况。

清除浮动的四种方式：

方法 说明 写法 备注
额外标签 [w3c推荐]也称隔墙法，指在浮动的块（行内块）级元素后面新增一个带有clear: both;属性的额外标签（要求是块级元素）来屏蔽浮动的影响。 clear: both; 弊端是增加了额外标签，对H5结构造成负担；
要求新增的标签不能是行内元素
父级添加overflow 仅给父级元素添加overflow，添加hidden、auto、scroll皆可。 overflow: hidden | auto | scroll 优点是代码简洁，缺点是无法显示溢出的部分
:after伪元素 额外标签法的升级版，利用CSS样式添加额外标签
仅给父级元素添加		 见下方 没有增加额外标签，样式写法较为复杂；
双伪元素 在子级前后各添加一个伪元素 见下方 代码简洁，照顾低版本。

:after伪元素代码示例：

1
2
3
4
5
6
7
8
9
10
11
.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {       /* IE6、7专有 */
	*zoom: 1;
}

双伪元素代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix:before, .clearfix:after{
	content: "";
	display: table;
}

.clearfix:after{
	clear: both;
}

.clearfix{
	*zoom: 1;
}

10. Position

定位的意义

让盒子自由地在某个盒子中移动或固定在屏幕中的某个位置，并且可以压住其他盒子。

注意：对于标准流和浮动，不可以使用定位。

定位模式

position: static | relative | absolute | fixed ;

定位分类 脱标 使用情况 参考系 其他特点
静态定位 static 否，不能使用边偏移 很少 无，不设置边偏移 按照标准流特性摆放位置
相对定位 relative 否，占用标准流的位置 常用 自身原来的位置 相对于自身原来的位置来移动
设置相对定位后，后面的标准流不会脱标，不会让身后的标准流往前挤或往后挤；
通常是给绝对定位当父级元素的属性
绝对定位 absolute 是，不占用标准流的位置 常用 最近一级父级以上带有定位的盒子（子绝父相） 如果没有已定位的父级元素，则以浏览器进行绝对定位
固定定位 fixed 是，不占用标准流的位置 常用 浏览器的可视窗口 与父级元素无关，不随窗口滚动条滚动
粘性定位 sticky 否，占用标准流的位置 很少 浏览器的可视窗口 相对定位和固定定位的混合体，具有两者的某些特点
必须添加至少一个边偏移参数
需与滚动搭配使用，对IE兼容性差，类似粘性定位的做法通常用JavaScript来做

边偏移

相对于父级盒子（或者有定位的祖辈盒子）的边线偏移量（偏移量可以为负值）。

需要在设置好定位模式后边偏移才能生效。

四种偏移：top、bottom、right、left；

例：top: 10px; right: 20px;

如何将内容固定到版心右侧？

使用固定定位至左侧的50%，在调整margin-left值至版心宽度的一般（直接书写数值px）。

如何让内容固定到屏幕正中心？

使用固定定位至左侧和顶部的50%，再使用margin-left和margin-right的负值来抵消自身宽高的一半。

定位显示优先级

定位显示优先级，即定位叠放顺序，是指 具有定位属性的盒子（类似于PS图层）在Z轴上的显示优先级，数值越大则优先级越高。

如果设置为auto，则按照H5结构书写顺序以“后来居上”的原则显示。

如果设置为数值，则比auto优先级更高，但是不能写单位。

z-index: (number) | auto;

定位的特殊性质

  • 给行内元素添加绝对或者固定定位后，可以设置宽度和高度（不等同于与块级元素互换特性？）
  • 给块级元素添加绝对或者固定宽度后，不设置宽高也可以则应用内容的大小

11. 显示与隐藏

显示与隐藏的三种方式：display（显示隐藏）、visibility（显示隐藏）、overflow （溢出显示隐藏）

方式 用法 特性
display（显示隐藏） 该属性本来是设置元素如何显示的；
display: none; 用于隐藏对象；
display: block; 除了用于转换成块级元素，还可以用于显示元素；		 隐藏元素后，不再占有其原位置；
应用广泛，搭配js做网页特效用；
visibility（显示隐藏） 用于设置元素的可见性；
visibility: visible | hidden | inherit | collapse ;		 隐藏元素后，仍占有其原位置；
overflow （溢出显示隐藏） 仅针对溢出元素框的部分进行显示或隐藏；
overflow: visible; 设置时clip属性设置将失效；
overflow: hidden; 不显示超过对象尺寸的内容；
overflow: scroll; 以滚动条形式显示，不管是否内容是否溢出；
overflow: auto; 自动判断内容长度，按需添加滚动条；		 如果带有定位属性，应慎用 overflow: hidden; ，会隐藏多余的部分

12. 布局

常见的布局形式

传统布局方式：普通流（文档流、标准流）、浮动、定位。

通栏：是指和浏览器一样宽。

布局设计准则：

  • 纵向块级元素用标准流，横向块级元素用浮动。

  • 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则。

  • 浮动的盒子只会影响浮动盒子后方的标准流，不影响前方的标准流。

  • 应首先采用“一浮全浮”设计原则。

  • 在产品列表数量众多、文字数量众多等不能明确盒子高度的情况下不应指定父级盒子的高度， 否则会出现父级盒子因高度限制而出现子元素无法显示的情况，应让子元素撑开父元素。

  • 当给父元素设置标准流却未设置高度，而子元素为浮动时，父元素会高度塌陷。因浮动的子元素不占有高度，因此子元素浮动会会导致无高度的标准流父级元素高度塌陷，影响后续布局。

CSS属性书写建议

  1. 布局定位属性：display / position / float / clear / visibility / overflow (建议display第一个写)
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
  4. 其他属性：content / cursor / border-radius / box-shadow / text-shadow / background:liner-gradient ....

页面布局的整体思路

  1. 确定版心，即可视区
  2. 分析行、块 以及 块中的列模块
  3. 列模块经常浮动布局，确定列大小后确定列的位置
  4. 先结构，后样式

关于导航栏

实际开发中，不会直接只用<a>来制作导航栏，而是用<li>包含链接的<li>+<a>来制作。

<li>+<a>语义更加清晰，更为有条理的列表型内容。如果直接用<a>，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字存在被搜索引擎降权的风险），从而影响网站排名。

13. 特殊符号

小于号 < &lt;

大于号 > &gt;

高级技巧

目标：

  • 能够使用精灵图

  • 能够使用字体图标

  • 能够写出CSS三角

  • 能够写出常见的CSS用户界面样式

  • 能够说出常见的布局技巧

CSS Sprites

CSS精灵技术的目的：减少客户端向服务器的请求次数，减小服务器的压力，提高网页的加载速度。