css学习记录day1

一、初识css及其发展

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等。而且还可以针对不同的浏览器设置不同的样式。

从HTML被发明开始，样式就以各种形式存在，不同的浏览器结合他们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长，为了满足页面设计者的需求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变得越来越杂乱，而且HTML页面也越来越臃肿，于是CSS便诞生了。

CSS用于控制网页的样式和布局, 修饰页面效果，可以配合脚本语言动态的对网页各元素进行格式化，在提升用户体验方面功不可没。

CSS1： W3C 推荐，CSS1 发布于 1996 年 12 月 17 日。1999 年 1 月 11 日，此推荐被重新修订。

CSS2：W3C 推荐，CSS2 发布于 1999 年 1 月 11 日。CSS2 添加了对媒介（打印机和听觉设备）和可下载字体的支持。

CSS3：将 CSS 划分为多个小模块: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局、弹性盒子等。

    <style>
        /* 在style标签里面去写我们的css样式 */
        div{
            /* 属性：属性值 */
            color: red;
            color: yellow;
            font-size: 20px;
        }
    </style>

二、文字属性

1.font-size

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

文字大小在改变，但是改变小的时候出现问题了，文字的大小有下限限制：12px

如果我们想要文字小于12px的话我们就需要使用（calc）来表示。

em：

em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相当于浏览器的默认字体尺寸。1em=16px 24px/16px=1.5em

font-size: 24px

font-size: 1.5em

px：

px：像素（Pixel）,相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。譬如，WINDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。

pt：

pt：点（Point），绝对长度单位，是1/72英寸。1in=72pt=96px

96px

其中：1in = 2.54cm = 25.4 mm = 72pt = 96px = 6em（windows）

2.font-family

 ,----逗号匹配的次序（一旦匹配成功就不会继续往下匹配）

' '----单引号或双引号来标识这是一个整体（字体的样式）

2.1.各种字体之间必须使用英文状态下的逗号“,”分隔。

2.2.中文字体需要加英文状态下的引号，英文字体一般不需要加引号。但如果多个英文单词则需要引号引起来，当需要设置英文字体时，英文字体名必须位于中文字体名之前。例如：font-family: Arial, "微软雅黑"; 。

2.3.如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：font-family: "Times New Roman";。

2.4.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

p {
    font-family:cursive;
}

3.font-weight

字体加粗除了用 b 和 strong 标签外，还可以使用CSS来实现，但CSS是没有语义的。 bold变粗、 lighter变细、number  以100作为倍数，整倍数相乘作为值。

数字 400 等价于 normal， 而 700 等价于 bold。

<style >
	p {
		font-weight: normal;
	}
	div {
		font-weight: bold;
	}
	span {
		font-weight: bolder;
	}
</style>

4.font-style

字体倾斜除了用 i 和 em 标签外，可以使用CSS实现，但CSS是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

italic和oblique区别：

1).italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用            

2).Oblique属性值来实现倾斜的文字效果.

<style>
	p {
		font-style: normal;
	}		
	div {
		font-style: italic;
	}		
	span {
		font-style: oblique;
	}
</style>

 

 5.font综合设置字体样式

font属性用于对字体样式进行综合设置(尽量不要使用)
使用：font: font-style  font-weight  font-size/line-height  font-family;

使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。 ​ 其中不需要的属性可以省略（取默认值），但必须保留font-size、font-family属性，否则font属性将不起作用。

三、文本属性

1.color

color属性用于指定文本的颜色，有4种表现形式。

1.1rgb-number：使用rgb颜色值表示，取值0~255，如rgb(255,0,0)，rgba(100%, 0%, 0%, .5)

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。a的值使用小数表示

1.2hex-number：使用十六进制数表示，取值是0~f，每个颜色使用两位表示，如：#ff0000表示红色 0-9 a:10 b:11 c:12 d:13 e:14 f:15

1.3color-name：使用颜色名称，如：red, transparent

1.4HSL 即色相、饱和度、亮度

        1.4.1色相（H）基本属性，就是平常所说的颜色名称，如红色等，取值： (0 ~360) ，0 / 360)为红色, 120 为绿色, 240 为蓝色

        1.4.2饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取值： 0-100% 。

        1.4.3亮度（L）增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化，取 值：0-100%。

<style >
	h1 {
		color: red;
	}
	h2 {
		color: #00ff00;
	}
	h3 {
		color: rgb(0, 0, 255);
	}
</style>

 

 2.text-align

text-align用于指定元素文本的水平对齐方式，取值有left、right、center、justify（两端对齐文本）

属性只会在非行内标签才会生效

<style type="text/css">
	h1 {
		text-align: left;	/*左对齐*/
	}
	h2 {
		text-align: center;	/*居中对齐*/
	}
	h3 {
		text-align: right; /*右对齐*/
	}
	p {
		text-align: justify; /*分散对齐，主要针对英文段落中出现空格时，由于两边对齐，空格的大小会有变化*/
	}
</style>

 3.text-decroation

text-decoration用于对文本添加修饰，如下划线、删除线等。

3.1none：默认，定义标准的文本，没有任何修饰。

3.2underline：定义在文本下方的一条线

3.3overline：定义在文本上方的一条线

3.4line-through：定义穿过文本的一条线

4.text-transform

text-transform用于转换文本的大小写（主要用于英文）

4.1none 默认

4.2uppercase 将所有的英文字母都变成大写 

4.3lowercase 将所有的英文字母都变成小写

4.4capitallize 每个单词首字母大写

5.text-indent

text-indent 属性规定文本块中首行文本的缩进。

数值：表示像素值

百分比：基于父元素宽度的百分比的缩进。

注意： 负值是允许的。如果值是负数，将第一行左缩进。

tip：首行缩进2字符使用 2em

6.text-shadow

text-shadow用于设置文本的阴影效果。

text-shadow:1px 1px 1px red; 

x轴方向的距离（必须，允许负值）  y轴方向的距离（必须，允许负值） z轴方向的距离（可选，模糊的距离 ） 颜色 （可选，阴影的颜色 ）

    <style>
        *{
            font-size: 40px;
        }
        p{
            text-shadow:2px 2px 2px red;
        }
    </style>

 7.text-direction

direction 用于指定文本的方向。

7.1ltr：默认的，文本方向从左到右 left to right

7.2rtl：文本方向从右到左。right to left

8.letter/word-spacing

word-spacing单词与单词之间的间隙，可以为负值，主要用于英文段落

letter-spacing 字符与字符之间的间隙，可以覆盖 word-spacing，也可以为负值，主要用于汉字

9.word-break

规定自动换行的处理方法。通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 保持同行显示，不是中文日语其实和normal一样

10.line-height

line-height 用于设置文字行与文字行之间的距离。

10.1number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

10.2length：设置固定的行间距 px em 。

10.2%：基于当前字体尺寸的百分比行间距。

在一行的盒子内，我们设定行高等于盒子的高度，就可以是文字垂直居中。只适用于单行文本

            p{
                font-size: 20px;
                line-height: 90%;
            }

四、css引入方式

1.行内样式表

直接在标签的属性中使用style声明，在style属性中添加css声明即可。

在标签内部再嵌套一个内嵌标签来设置样式

<h1>这是一个<span style="color: red;">行内样式表</span>的css</h1>

2.内部样式表（内联样式）

定义在head或body标签中,使用style标签.

当单个文档需要特殊的样式时，就应该使用内部样式表。

<style >
	h1 {
        background-color: deeppink;
        color: blue;
	}
</style>

3.外部样式表

定义在外部的css文件中，需要在head中引入相应的css文件

html文件中：使用link来导入css文件

<link  rel="stylesheet" href="../css/test.css" />

样式表样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现结构与样式相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

3种样式表的优先级：

3.1行内样式表 > 内部样式表 = 外部样式表

3.2当内部样式表和外部样式表同时存在时，采用 就近原则 来使用样式

 五、基本选择器

1.标签选择器（元素选择器）

标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

h1 {
    color: red;
}

p {
    color: green;
}

2.类选择器

类选择器使用“.”（英文点）进行标识，后面紧跟类名。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

tips：

2.1.长名称或词组可以使用中横线来为选择器命名。text-color-red

2.2不要纯数字、中文等命名，尽量使用英文字母来表示。见名知意

<div class="demo">这是一个div</div>

.demo {
    color: red;
}

3.id选择器

id选择器使用“#”进行标识，后面紧跟id名

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法基本与类选择器相同。

<div class="lin">林黛玉</div>	<!-- 使用类选择器 -->
<div id="xue">薛宝钗</div>		<!-- 使用id选择器 -->

<style>
	.lin {			/*类选择器， 在元素中使用class属性*/
		color: blue;
	}
	#xue {			/*id选择器， 在元素中使用id属性*/
		color: red;
	}
</style>

4.通配符选择器

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML元素的默认边距。

tips：权重很低通配选择器较少使用

* {
    margin: 0;	/*定义外边距*/
    padding: 0;	/*定义内边距*/
}

5.行内样式

特定的HTML标记内使用style属性来设置css样式，将css样式代码写在具体网页中的一个html标签元素内。

建议不要使用行内样式，因为每个HTML标记都需要单独设置样式，如果您只使用行内样式，管理网站可能会变得十分困难。但是，它在某些情况下很有用。例如，在您无法访问CSS文件或仅需要为单个元素应用样式的情况下。

<html>

  <body style="background-color:black;">

    <h1 style="color:white;padding:30px;">大白兔，白了又了白</h1>

    <p style="color:white;">两只耳朵竖起来</p>

   </body>

</html>

6.基本选择器优先级

6.1通配符<元素选择器<类选择器<id选择器<行内样式<!important

6.2important的使用优缺点：

        1.可以在使用样式属性的时候直接将某个样式声明变为最高级（该样式会被作用到页面上去）

        2.破坏了我们的页面结构性

        3.在实际开发中一定要慎用

6.3通配符使用的优缺点

        1.选择的范围是所有的标签，可以让我们的浏览器的页面初始化相同（格式化浏览器）

        （清除浏览器默认样式）

        2.会对所有的元素做一次匹配，做一次匹配就会消耗一次时间

 六、伪类选择器

1.链接伪类选择器

链接伪类选择器：当我们的标签被发生某些操作的时候，会触发的选择器样式改变

    a:link  链接未被访问

    a:visited  链接被访问后

    a:hover  当鼠标移上去

    a:active  当鼠标点击时

注意：

1.a:hover 必须在 a:link 和 a:visited 之后。

2.a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。

<style>
	a:link {		/*未访问的链接*/
		font-size: 16px;
		color: grey;
		font-weight: 700;
	}
	a:visited {		/*已访问的链接 表示已经点击过一次的状态*/
		font-size: 16px;
		color: orange;
		font-weight: 700;
	}
	a:hover {		/*鼠标移动到链接上*/
		font-size: 16px;
		color: red;
		font-weight: 700;
	}
	a:active {		/*选定的链接  鼠标点击不松开的状态*/
		font-size: 16px;
		color: blue;
		font-weight: 700;
	}
</style>

2.input伪类选择器

2.1.input:focus 输入框聚焦操作

当鼠标聚焦到input输入框时，此时标签发生变化

        input:focus{
            width: 300px;
            height: 50px;
        }

2.2input:checked

当按钮被选中的时候发生的样式改变

        input:checked{
            display: none;
        }

3.结构（位置）伪类选择器

当页面上的某个元素处于在不同的位置上的时候，我们可以通过伪类选择器去选择某个标签或者某个class相同的元素。

:first-child 获取第一个子元素

:last-child 获取最后一个子元素。

:nth-child(n)选取某个元素的一个或者多个特定的子元素。

:nth-last-child(n) 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。

p:first-child { /* 选择所有元素的第一个子元素,如果第一个子元素为p则匹配成功*/
	color: red;
}
p:last-child { /*选择所有元素的最后一个子元素,如果最后一个子元素为p则匹配成功*/
	color: blue;
}
div:nth-child(2) { /*选择所有元素的第二个子元素,如果第二个子元素为div则匹配成功*/
	color: blue;
}

    <div>body下面的第一个div</div>
    <div>body下面的第二个div</div>
    <div>body下面的第三个div</div>
    <span>第1个span</span>
    <span>第2个span</span>

 

:first-of-type 选择特定元素的第一个子元素

:last-of-type 选择特定元素的最后一个子元素

:nth-of-type(n) 只计算父元素中指定的某种类型的子元素

        /* 选择父元素中的第一个p子元素 */
        p:first-of-type {
            background-color: red;
        }
        /* 选择父元素中的最后一个p子元素 */
        p:last-of-type {
            background-color: blue;
        }
        /* 选择父元素中的第二个span子元素 */
        span:nth-of-type(2) {
            color: yellowgreen;
            font-weight: bold;
        }
        /* 选择父元素中倒数第二个span子元素 */
        span:nth-last-of-type(2) {
            color: cornflowerblue;
            font-weight: bold;
        }

    <div>body下面的第一个div</div>
    <div>body下面的第二个div</div>
    <p>第一个p</p>
    <p>第二个p</p>
    <p>第三个p</p>
    <span>第1个span</span>
    <span>第2个span</span>
    <span>第3个span</span>

 区别在于：

p:first-child   p必须是在父元素的第一个子元素才能选中，即选中父元素中第一个子元素且第一个子元素为p
p:first-of-type表示的是选中父元素中第一个p元素，即使p不是父元素的第一个元素也能被选中 ，即选中父元素中第一个子元素为冒号前边的元素