CSS笔记

CSS

CSS 和 HTML的结合方式有3 种：

• 行内样式：在某个特定的标签里采用 style属性。范围只针对此标签。
• 内嵌样式表：在页面的 head 里采用<style>标签。范围针对此页面。
• 引入外部样式表 css 文件的方式。这种引入方式又分为两种：
  • 采用<link>标签。例如：<link rel = "stylesheet/alternate stylesheet" type = "text/css" href = "a.css"></link>
  • 采用 import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

两种引入样式方式的区别：外部样式表中不能写标签，但是可以写 import 语句。

字体属性

• line-height：行高
• font-size：字号
• font-family：字体
  • Microsoft YaHei
  • SimSun（宋体）
• font-weight：加粗(bold)/正常(nomal)
  • 取值100-900整百

简写—>font: 加粗 字号/行高/ 字体;

举例—>font: 400(700) 14px/24px “宋体”;

简写—>font:12px/30px “Times New Roman”,”Microsoft YaHei”,”SimSun”;

文本属性

• letter-spacing: 单个字母之间的间距
• word-spacing: 单词之间的间距
• text-decoration: 字体修饰
  • none 去掉下划线
  • underline下划线
  • line-through 中划线
  • overline 上划线
• text-transform: 单词字体大小写
  • uppercase 大写
  • lowercase 小写
  • capitalize 每个单词的首字母大写
• color: 字体颜色
• text-align: 在当前容器中的对齐方式
  • left、right、center、justify

鼠标的属性 cursor

用的时候再查

• auto：默认值。浏览器根据当前情况自动确定鼠标光标类型。
• pointer：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
• hand：和pointer的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

背景属性

• background-color

• background-image:url(img/1.jpg);

• background-repeat 默认平铺满

  • no-repeat
  • repeat-x横向平铺
  • repeat-y纵向平铺

• background-position:向右偏移量(x) 向下偏移量(y);

  • 描述左右的词：left、center、right
  • 描述上下的词：top 、center、bottom

• background-attachment: 设置背景图片是否跟着滚动条一起移动

  • scroll 随着移动
  • fixed 固定

• background-clip 背景裁切

  • 设置元素的背景（背景图片或颜色）是否延伸到边框下面

  • border-box 超出 border-box 的部分，将裁剪掉

  • padding-box 超出 padding-box 的部分，将裁剪掉

  • content-box 超出 content-box 的部分，将裁剪掉

• background-origin 背景原点

  • 控制背景从什么地方开始显示
  • padding-box 内边距开始
  • border-box 边框区开始
  • content-box 内容区开始

• background-size 背景尺寸

  • （宽 高）具体数值/百分比
  • cover 图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏
  • contain 图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白

• background-image 渐变

  • 线性渐变：沿着某条直线朝一个方向产生渐变效果

  • ```css

    background-image: linear-gradient(方向(默认是从上往下), 起始颜色, 终止颜色);
    
    background-image: linear-gradient(to right, yellow, green);
                      linear-gradient(to right,
                                            yellow 0%,
                                            red 40%,
                                             green 70%,
                                             blue 100%);

      - 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。
    
    - 径向渐变：从一个中心点开始沿着四周产生渐变效果
    
      - ```css
        background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
            
        background-image: radial-gradient(100px at center,yellow ,green);
            

  • 重复渐变

• 设置多个背景

  • 用以逗号隔开,可用于自适应局。

background: url(images/bg1.png) no-repeat left top,
            url(images/bg2.png) no-repeat right top,
            url(images/bg3.png) no-repeat right bottom,
            url(images/bg4.png) no-repeat left bottom,
            url(images/bg5.png) no-repeat center;

clip-path：裁剪出元素的部分区域做展示(不是背景属性)

综合属性background，它的作用是：将上面的多个属性写在一个声明中。

举例:

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：

background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

色彩的表示方法

RGBA 表示法

background-color: rgba(0, 0, 255, 0.3);

border: 30px solid rgba(0, 255, 0, 0.3);

代码解释：

• RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度。

• R、G、B 的取值范围是：0255；透明度的取值范围是 01。

十六进制表示法

所有#aabbcc的形式，能够简化为**#abc**。举例如下：

比如：

background-color:#ff0000;

等价于：

background-color:#f00;

比如：

background-color:#112233;

等价于：

background-color:#123;

但是，比如下面这个是无法简化的：

background-color:#222333;

再比如，下面这个也是无法简化的：

background-color:#123123;

几种常见的颜色简写可以记住。如下：

#000   黑
#fff   白
#f00   红
#222   深灰
#333   灰
#ccc   浅灰

HSLA 表示法

举例：

background-color: hsla(240,50%,50%,0.4);

解释：

• H 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。

• S 饱和度，取值范围 0%~100%。值越大，越鲜艳。

• L 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。

• A 透明度，取值范围 0~1。

推荐链接：配色宝典

高级选择器

• 后代选择器：用空格隔开
• 交集选择器：选择器之间紧密相连
• 并集选择器（分组选择器）：用逗号隔开
• 伪类选择器
  • 静态伪类：只能用于超链接的样式。
    • :link 超链接点击之前
    • :visited 链接被访问过之后
  • 动态伪类：针对所有标签都适用的样式。
    • :hover “悬停”：鼠标放到标签上的时候
    • :active “激活”： 鼠标点击标签，但是不松手时。
    • :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
  • 在css中，这四种状态必须按照固定的顺序写：==a:link 、a:visited 、a:hover 、a:active==

了解:

1. 子代选择器，用符号>表示
2. 序选择器
3. 下一个兄弟选择器

CSS的层叠性

CSS像艺术家一样优雅，像工程师一样严谨。 太难了,又抽象,又现实

当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：

• id 选择器
• 类选择器、属性选择器、伪类选择器
• 标签选择器、伪元素选择器

ID选择器 > 类选择器 > 标签选择器

!important标记(属性)：优先级最高

属性名: 属性值 !important;

盒子模型

• width和height：内容的宽度、高度（不是盒子的宽度、高度）。
• padding：内边距。
• border：边框。
• margin：外边距。

border:1px solid red;

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

标准文档流

行内元素和块级元素

• 行内元素
  • 与其他行内元素并排；
  • 不能设置宽、高。默认的宽度，就是文字的宽度。
• 块级元素
  • 霸占一行，不能与其他任何元素并列；
  • 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

复习以下HTML

• 文本级标签：p、span、a、b、i、u、em。
• 容器级标签：div、h系列、li、dt、dd。

在css的角度中容器标签为块级元素,p也为块级元素

块级元素转换为行内元素

display(显示): inline(内联元素);

那么，这个标签将立即变为行内元素，此时它和一个span无异。也就是说：

• 此时这个div不能设置宽度、高度；
• 此时这个div可以和别人并排了。

行内元素转换为块级元素

display: block(块);

那么，这个标签将立即变为块级元素，此时它和一个div无异。

• 此时这个span能够设置宽度、高度
• 此时这个span必须霸占一行了，别人无法和他并排
• 如果不设置宽度，将撑满父亲

浮动的性质

浮动是css里面布局用的最多的属性。

性质1：浮动的元素脱标

脱标即脱离标准流

一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。所有标签，浮动之后，已经不区分行内、块级了。

性质2：浮动的元素互相贴靠

性质3：浮动的元素有“字围”效果

初期一定要遵循一个原则：永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

性质4：收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）

浮动的清除

clear:both;属性

clear:both的意思就是：不允许左侧和右侧有浮动对象。

这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。

margin失效的本质原因是：上图中的box1和box2，高度为零。

隔墙法

两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。

内墙法：

<div>
	<p></p>
	<p></p>
	<div class="cl"></div>
//公式:两个p都浮动,所以父亲div不能被撑出高.如果在家装修一堵墙,就能让div被儿子撑出高度,
//即:此时div可以自适应内容
</div>

父亲添加overflow

将其属性值设置为hidden、auto或scroll

• 优点:代码整洁
• 缺点:无法显示溢出部分

:after 伪元素法

.clearfix:after{
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{/* IE6、7 转有*/
	*zoom: 1;
}

双伪元素

.clearfix:before,.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after{
	clear:both;
}
.clearfix{/* IE6、7 转有*/
	*zoom: 1;
}

定位属性

以盒子为参考点

定位 = 定位模式 + 边偏移

一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。

static//静态定位  relative//相对定位 absolute//绝对定位 fixed//固定定位 =>定位模式
top bottom left right =>边偏移

相对定位

position: relative; 

相对定位不脱标,继续保留原来的位置

让元素相对于自己原来的位置,进行位置调整（可用于盒子的位置微调）

相对定位的定位值

• left：盒子右移

• right：盒子左移

• top：盒子下移

• bottom：盒子上移

PS：负数表示相反的方向。

绝对定位

position: absolute;  

绝对定位脱标,绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。

• 如果没有祖先元素或祖先元素没有定位,则以浏览器为准定位
• 如果祖先元素定位(行对/绝对/固定),则以最近一级的有定位祖先元素为参考点移动位置
• 绝对定位不再占有位置

绝对定位的参考点

（1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角：

（2）如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸

“子绝父相”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：

父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。

固定定位

固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。

用途1：网页右下角的“返回到顶部”

用途2：顶部导航条

z-index属性：

z-index属性：表示谁压着谁。数值大的压盖住数值小的。

有如下特性：

（1）属性值大的位于上层，属性值小的位于下层。

（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。

（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。

（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。