CSS简介及常用样式

一、CSS简介

CSS：层叠样式表(英文全称：Cascading Style Sheets)：是一种用来表现HTML样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、CSS选择器

2.1基本选择器（三种）

1.标签选择器

<style>
    p {
        font-size:20px;
    }
</style>

2.类选择器（不唯一，用.）

<style>
    .one {
        font-size:20px;
    }
</style>
<p class="one">这是一个p标签</p>

3.id选择器（唯一，一个网页只能出现一次，用#）

<style>
    #one {
        font-size:20px;
    }
</style>
<p id="one">这是一个p标签</p>

2.2层次选择器

1.后代选择器

下面div中的全部p中都会字体变大，div外的p则不会

<style>
    div p {
        font-size:20px;
    }
</style>
<div>
    <p>这是div里的p标签</p>
    <p>这是div里的p标签</p>
</div>
<p>这是p标签</p>

2.子选择器

只能找到前两个p无法再找到里面的p

<style>
    div > p {
        font-size: 20px;
    }
</style>
<div>
    <p>这是div里的p标签</p>
    <p>这是div里的p标签</p>
    <ul>
        <li><p>这是div里的p标签</p></li>
    </ul>
</div>
<p>这是p标签</p>

3.兄弟选择器

相邻兄弟选择器：找一个元素下边的第一个兄弟元素，操作符是+号
所有兄弟选择器：找一个元素下边所有兄弟元素，操作符是~号

<style>
    /*第2，4，5，7的p会放大字体，因为他们上面还有个p，第三个p没有放大是因为被h3中断了导致上面并不是p*/
    p + p {
        font-size: 20px;
    }
</style>
<div>
    <p>这是div里的p标签</p>
    <p>放大</p>
    <h3>断开</h3>
    <p>这是div里的p标签</p>
    <p>放大</p>
    <p>放大</p>
</div>
<p>这是p标签</p>
<p>放大</p>

<style>
    /*跟他同级的不含它本身*/
    p ~ p {
        font-size: 20px;
    }
</style>
<div>
    <p>这是div里的p标签</p>
    <p>放大</p>
    <h3>断开</h3>
    <p>放大</p>
    <p>放大</p>
    <p>放大</p>
</div>
<p>这是p标签</p>
<p>放大</p>

4.群组选择器

前三个p中字体都变大了

<style>
    div > p,li > p {
        font-size: 20px;
    }
</style>
<div>
    <p>这是div里的p标签</p>
    <p>这是div里的p标签</p>
    <ul>
        <li><p>这是div里的p标签</p></li>
    </ul>
</div>
<p>这是p标签</p>

2.3伪类选择器

1.:first-of-type：选择一组子元素中的第一个（即使有其他子元素，也不会受到影响）

<style>
    div p:first-of-type{
        color: red;
    }
</style>
<div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

2.:last-of-type：选择一组子元素中的最后一个（即使有其他子元素，也不会受到影响）

<style>
    div p:last-of-type {
        color: red;
    }
</style>
<div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

3.:nth-of-type()：使用索引来选择某一个子元素（即使有其他子元素，也不会受到影响）

<style>
    div p:nth-of-type(2){
        color: red;
    }
</style>
<div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

三、CSS引入方式

• 行内样式
• 内部样式
• 外部样式

3.1行内样式

只对写入本标签生效，多个用,隔开

<p style="color: orange;font-size:23px;">行内样式</p>

3.2内部样式

可以参考上面第二模块部分

<style>
    div p:nth-of-type(2){
        color: red;
    }
</style>
<div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

3.3外部样式

要单独写一个.css文件，并且要在html页面中导入，在head中添加

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

四、CSS优先级

4.1基本规则

• 从引用方式方面来说：行内样式 > 内嵌样式/外部样式

• 从选择器方面来说：ID 选择器 > 类选择器（属性选择器、伪类选择器） > 标签选择器

4.2叠加时的优先级

• 就近原则：距离最近的样式有效。
• 顺序原则：这里的顺序是指的书写顺序，也就是最后书写(不是调用)的样式有效。
• 精细原则：或者叫特殊原则。既选择器的指向越精细越优先。

五、CSS中的颜色

这里仅仅写了我常用的，更多的读者可以进一步查询如：HSL、HSLA

5.1直接使用颜色英文单词

red、green、orange、blue...

5.2使用十六进制表示

//前两位红，中间两位绿，后面两位蓝
通常是6位
#99CCFF
也可以简写为3位
#9CF

5.3RGB与RGBA

//RGB由三部分组成
//第一位红，第二位绿，第三位蓝(范围0-255)
RGB(255,0,0);

//RGBA由四部分组成，最后一位用于加透明度
//最后一位(范围(0-1),0完全透明,1完全不透明
RGBA(255,0,0,0.6);

六、常用样式

6.1字体样式

属性名	含义	值
font-family	设置字体名称	宋体、黑体...
font-size	设置字体大小	px,em
font-style	设置字体风格	normal,italic
font-weight	设置字体粗细	normal,bold,100-900(400为normal,700为bold)

6.2文本样式

属性名	含义	值
color	设置文本颜色	#45F78,#ff6600,#f60, rgb(0,0,0)
text-align	设置元素水平对齐方式	left, center,right, justify
vertical-align	设置元素垂直对齐方式	middle, top, bottom,长度或百分比(可为负值) (只对内联元素有效。或对td、th有效。) 图片居中有时候也会用它
line-height	设置文本的行高	normal,长度或百分比(可为负值)
text-decoration	设置文本的装饰	none, underline, overline, line-through

6.3尺寸样式

属性名	含义	值
width	宽度	长度或百分比
height	高度	长度或百分比

6.4列表样式

属性名	含义	值
list-style	设置列表自身样式	none

6.5背景样式

属性名	含义	值
background-color	背景颜色	#45F78,#ff6600,#f60, rgb(0,0,0)
background-image	背景图象	图片URL或none
background-repeat	背景重复	repeat、repeat-x、repeat-y、no-repeat

6.6鼠标样式

属性名	含义	值
cursor	设置鼠标放置样式	default、pointer（小手常用）、wait、help、text、crosshair

6.7伪类样式

这个顺序不能变从上到下lvha

属性名	含义	值
a:link	未单击访问时超链接样式	a:link
a:visited	单击访问后超链接样式	a:visited
a:hover	鼠标悬浮其上的超链接样式	a:hover
a:active	鼠标单击末释放的超链接样式	a:active

6.8透明度样式

属性名	含义	值
opacity	设置透明度	0-1