CSS笔记(一)

CSS

CSS 语法

语法格式

选择器 {属性名:属性值;属性名:属性值;}

CSS 的一些简单常见的属性

• 括号中内容为快捷键

字体颜色：（c）

color:red;

字号大小：（fos）

font-size:40px;

背景颜色：（bgc）

background-color: blue;

加粗：（fwb）

font-weight: bold;

不加粗：（fwn）

font-weight: normal;

斜体：（fsi）

font-style: italic;

不斜体：（fsn）

font-style: normal;

下划线：（tdu）

text-decoration: underline;

没有下划线：（tdn）

text-decoration:none;

样式表

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

CSS 的四种基本选择器

CSS 的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

• 标签选择器：针对一类标签
• ID 选择器：针对某一个特定的标签使用
• 类选择器：针对你想要的所有标签使用
• 通用选择器（通配符）：针对所有的标签都适用

1、标签选择器：选择器的名字代表 html 页面上的标签

标签选择器，选择的是页面上所有这种类型的标签

p{ font-size:14px; }

2、ID 选择器：规定用#来定义

针对某一个特定的标签来使用，只能使用一次

#mytitle{ border:3px dashed green; }

3、类选择器：规定用圆点.来定义

.one{ width:800px; }

1、类选择器可以被多种标签使用。
2、同一个标签可以使用多个类选择器，用空格隔开。

上面这三种选择器的区别：

• 标签选择器针对的是页面上的一类标签。
• ID 选择器是只针对特定的标签(一个)，ID 是此标签在此页面上的唯一标识。
• 类选择器可以被多种标签使用

4、通配符*：匹配任何标签

通用选择器，将匹配任何标签。

* {
    margin-left: 0px;
    margin-top: 0px;
}

CSS 的几种高级选择器

高级选择器：

• 后代选择器：用空格隔开
• 交集选择器：选择器之间紧密相连
• 并集选择器（分组选择器）：用逗号隔开
• 伪类选择器

1、后代选择器: 定义的时候用空格隔开

<style type="text/css">
    .div1 p {
        color: red;
    }
</style>

空格就表示后代。.div1 p 表示.div1的后代所有的p。

2、交集选择器：定义的时候紧密相连

定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如div.haha，再比如p.special。

如果后一个选择器是类选择器，则写为div.special；如果后一个选择器 id 选择器，则写为div#special。
注: 交集选择器没有空格。没有空格的div.red（交集选择器）和有空格的div .red（后代选择器）不是一个意思。

3、并集选择器：定义的时候用逗号隔开

三种基本选择器都可以放进来。

p,
h1,
#mytitle,
.one {
    color: red;
}

1.子代选择器，用符号>表示

div > p {
    color: red;
}

div 的儿子 p。和 div 的后代 p 的截然不同。

能够选择：

<div>
    <p>我是div的儿子</p>
</div>

不能选择：

<div>
    <ul>
        <li>
            <p>我是div的重孙子</p>
        </li>
    </ul>
</div>

2.序选择器

设置无序列表<ul>中的第一个<li>为红色：

<style type="text/css">
    ul li:first-child {
        color: red;
    }
</style>

设置无序列表<ul>中的最后一个<li>为红色：

ul li:last-child {
    color: blue;
}

3.下一个兄弟选择器

+表示选择下一个兄弟

<style type="text/css">
    h3 + p {
        color: red;
    }
</style>

上方的选择器意思是：选择的是 h3 元素后面紧挨着的第一个兄弟。

伪类（伪类选择器）

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。

静态伪类和动态伪类

伪类选择器分为两种。

（1）静态伪类：只能用于超链接的样式。如下：

• :link 超链接点击之前
• :visited 链接被访问过之后

PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

• :hover “悬停”：鼠标放到标签上的时候
• :active “激活”： 鼠标点击标签，但是不松手时。
• :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

超链接a标签

超链接的四种状态

a标签有4种伪类，(重要):

• :link “链接”：超链接点击之前
• :visited “访问过的”：链接被访问过之后
• :hover “悬停”：鼠标放到标签上的时候
• :active “激活”： 鼠标点击标签，但是不松手时。

在css中，四种状态必须按照固定的顺序写：

a:link 、a:visited 、a:hover 、a:active
如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。

• 注：在写a:link、a:visited这两个伪类的时候，要么同时写，要么同时不写。如果只写a属性和a:link属性，不规范。

超链接的美化

a{}和a:link{}的区别：

• a{}定义的样式针对所有的超链接(包括锚点)
• a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)

动态伪类举例

针对所有标签都适用

• :hover “悬停”：鼠标放到标签上的时候
• :active “激活”： 鼠标点击标签，但是不松手时。
• :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

CSS的单位

绝对单位

1 in=2.54cm=25.4mm=72pt=6pc。

各种单位的含义：

• in：英寸Inches (1 英寸 = 2.54 厘米)
• cm：厘米Centimeters
• mm：毫米Millimeters
• pt：点Points，或者叫英镑 (1点 = 1/72英寸)
• pc：皮卡Picas (1 皮卡 = 12 点)

相对单位

px：像素
em：印刷单位相当于12个点
%：百分比，相对周围的文字的大小

font字体属性

CSS样式中常见的字体属性:

p{
	font-size: 50px; 		/*字体大小*/
	line-height: 30px;      /*行高*/
	font-family: 幼圆,黑体; 	/*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
	font-style: italic ;		/*italic表示斜体，normal表示不倾斜*/
	font-weight: bold;	/*粗体*/
	font-variant: small-caps;  /*小写变大写*/
}

文本垂直居中

• 单行文本:设置行高=盒子高
• 多行文本:设置行高(line-height)=盒子高，行内间距(padding)=(盒子高-行高)/2

字号、行高、字体三大属性

（1）字号：

	font-size:14px;

（2）行高：

	line-height:24px;

（3）字体：font-family

	font-family:"宋体";

• font属性连写至少要有字号和字体

文本属性

CSS样式中，常见的文本属性有以下几种：

• letter-spacing: 0.5cm ; 单个字母之间的间距
• word-spacing: 1cm; 单词之间的间距
• text-decoration: none; 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线
• text-transform: lowercase; 单词字体大小写。uppercase大写、lowercase小写
• color:red; 字体颜色
• text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify
• text-transform: lowercase; 单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）

列表属性

ul li{
	list-style-image:url(images/2.gif) ;  /*列表项前设置为图片*/
	margin-left:80px;  /*公有属性*/
}

简写属性list-style：将上面的多个属性写在一个声明中。

overflow属性：超出范围的内容要怎么处理

overflow属性的属性值可以是：

• visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
• hidden：不显示超过对象尺寸的内容。
• auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
• scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。

鼠标的属性 cursor

鼠标的属性cursor有以下几个属性值：

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

background 的常见背景属性(重要)

• background-color:#ff99ff; 设置元素的背景颜色。

• background-image:url(images/2.gif); 将图像设置为背景。

• background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要）

  • no-repeat不要平铺；
  • repeat-x横向平铺；
  • repeat-y纵向平铺。

• background-position:center top; 设置背景图片在当前容器中的位置。

• background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。
  属性值可以是：scroll（与fixed属性相反，默认属性）、fixed（背景就会被固定住，不会被滚动条滚走）。

CSS3 中，新增的一些background属性：

• background-origin

• background-clip 背景裁切

• background-size 调整尺寸

• 多重背景

background-color：背景颜色的表示方法

	background-color: red;
	background-color: rgb(255,0,0);
	background-color: #ff0000;

RGBA 表示法

CSS3中新增表示颜色的方式:RGBA或者HSLA

    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 的取值范围是：0~255；透明度的取值范围是 0~1。

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。

关于设置透明度的其他方式：

（1）opacity: 0.3; 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。

（2）background: transparent; 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。

background-repeat属性

background-repeat:no-repeat;设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：

• no-repeat（不要平铺）
• repeat-x（横向平铺）
• repeat-y（纵向平铺）

background-position属性

background-position属性指的是背景定位属性。公式如下：

	background-position:向右偏移量 向下偏移量;

属性值可以是正数，也可以是负数。比如：100px 200px、-50px -120px。

	background-position: 描述左右的词 描述上下的词;

• 描述左右的词：left、center、right
• 描述上下的词：top 、center、bottom
  bottom表示图片的底边和父亲底边贴齐

background-size属性：背景尺寸

background-size属性：设置背景图片的尺寸。

格式举例：

	/* 宽、高的具体数值 */
	background-size: 500px 500px;

	/* 宽高的百分比（相对于容器的大小） */
	background-size: 50% 50%;   // 如果两个属性值相同，可以简写成：background-size: 50%;

	background-size: 100% auto;  //这个属性可以自己试验一下。

	/* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
	background-size: cover;

	/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。  */
	background-size: contain;

背景原点：background-origin 属性

background-origin 属性：控制背景从什么地方开始显示。

格式举例：

	/* 从 padding-box 内边距开始显示背景图 */
	background-origin: padding-box;           //默认值

	/* 从 border-box 边框开始显示背景图  */
	background-origin: border-box;

	/* 从 content-box 内容区域开始显示背景图  */
	background-origin: content-box;

如果属性值设置成了border-box，那边框部分也会显示图片

background-clip属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面

格式举例：

background-clip: content-box; 超出的部分，将裁剪掉。属性值可以是：

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

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

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

同时设置多个背景

给一个盒子同时设置多个背景，用逗号隔开。可用于自适应局

渐变：background-image

渐变分为：

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

• 径向渐变：从一个中心点开始沿着四周产生渐变效果。

• 重复渐变。

线性渐变

格式：

    background-image: linear-gradient(方向, 起始颜色, 终止颜色);

    background-image: linear-gradient(to right, yellow, green);

参数解释：

• 方向可以是：to left、to right、to top、to bottom、角度30deg（指的是顺时针方向30°）。

径向渐变

格式：

	background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);

	background-image: radial-gradient(100px at center,yellow ,green);

解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。

中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。

clip-path：裁剪出元素的部分区域做展示

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
clip-path不是背景属性

举例：（鼠标悬停时，放大裁剪的区域）

    .div1 {
        width: 320px;
        height: 320px;
        border: 1px solid red;
        background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat;
        background-size: cover;

        /* 裁剪出圆形区域 */
        clip-path: circle(50px at 100px 100px);
        transition: clip-path .4s;
    }
    .div1:hover{
        /* 鼠标悬停时，裁剪出更大的圆形 */
        clip-path: circle(80px at 100px 100px);
    }
 right  center bottom  top。如果以像素为单位，则中心点参照的是盒子的左上角。

## clip-path：裁剪出元素的部分区域做展示

`clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
`clip-path`不是背景属性

举例：（鼠标悬停时，放大裁剪的区域）

```css
    .div1 {
        width: 320px;
        height: 320px;
        border: 1px solid red;
        background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat;
        background-size: cover;

        /* 裁剪出圆形区域 */
        clip-path: circle(50px at 100px 100px);
        transition: clip-path .4s;
    }
    .div1:hover{
        /* 鼠标悬停时，裁剪出更大的圆形 */
        clip-path: circle(80px at 100px 100px);
    }