【从0-1的CSS】第1篇：CSS简介，选择器以及常用样式

CSS简介

css：cascading style sheet的缩写，意为层叠样式表，主要是用于描述网页的表现形式（网页元素的大小、颜色）

CSS的语法规则

css的语法规则主要是三部分组成：选择器{属性1:属性1值…;}

1、选择器：用来选择要定义样式的网页中元素的东西

2、属性：表示网页中元素要定义什么样的类型属性（颜色、大小）

3、属性值：表示属性的显示值（网页中的显示效果）

选择器

要选择器为以下三种，css还提供了其他类型选择器，比如分组选择器，后代选择器…有兴趣去查文档了解

<!--id选择器：通过要定义样式元素的id属性值（唯一）来锁定要定义样式的元素，语法：#id属性值-->
<span id="idSel">id选择器</span><!--元素选择器：通过要定义样式元素的标签名来锁定要定义样式的元素，语法：元素-->
<span>元素选择器</span><!--类选择器：通过要定义样式元素的class属性值来所锁定要定义的元素，语法：.class属性值-->
<span class="classSel">类选择器</span>

id选择器

通过要定义样式元素的id属性值(唯一)来锁定要定义样式的元素，语法：#id属性值{}

#idSel{color: red;
}

元素选择器

通过要定义样式元素的标签名来锁定要定义样式的元素，语法：元素{}

span{font-family: cursive;
}

类选择器

通过要定义样式元素的class属性值来所锁定要定义的元素，语法：.class属性值{}

.classSel{color: crimson;
}

选择器优先级

d选择器 > 类选择器 > 元素选择器

CSS注释

css的注释方法：/**/
/*.classSel{*/
/*    color: crimson;*/
/*}*/

CSS常用设置样式

颜色

可以定义元素的颜色，color、background-color等属性可以设置颜色样式，常用设置颜色样式有以下6中方法：指定颜色可以通过使用预定义的颜色名称、RGB、HEX、HSL、RGBA、HSLA 值

颜色名称(常用)

颜色名称：比如red、green等颜色的具体名称来设置颜色，名称不区分大小写

<h1 style="color: red">颜色名称</h1>

RGB(常用)

RGB：是通过rgb()函数对三原色(red、green、blue)的强度来进行控制来实现不同颜色的设置

<h2 style="color: rgb(255,100,100)">rgb</h2>

RGBA(常用)

RGBA：在RGB上进行扩展，A代表设置颜色的透明度

<h4 style="color: rgba(100,255,0,100)">rgba</h4>

HEX(常用)

HEX：使用十六进制码以 #RRGGBB 或 #RGB（比如 #ff0000）的形式设置具体颜色，“#” 后跟 6 位或 3 位十六进制字符（0-9, A-F）

<h3 style="color: #ffa500">hex</h3>

HSL

HSL：通过 hsl(hue：色调、saturation：饱和度、lightness：亮度) 函数对颜色的色调、饱和度、亮度进行调节，从而实现不同的颜色

<h5 style="color: hsl(0,50%,50%)">hsl</h5>

HSLA

HSLA：在hsl上进行扩展，A代表设置颜色的透明度

<h6 style="color: hsla(0, 100%, 50%, 0.5)">hsla</h6>

背景

背景主要是定义元素的背景效果，css中可以设置背景样式的常用属性有以下几种

background-color

background-color 为元素设置背景颜色-

<p style="background-color: blue">background-color属性</p>

background-image

background-image 用来为某个元素设置背景图像

<p style="background-image: url('../HTML/64960446_p0.jpg')">background-image属性</p>

background-size

background-size 属性用来设置背景图像的尺寸

<p style="background-image: url('../HTML/64960446_p0.jpg');background-size: contain;">background-size 属性</p>

字体

文本主要定义元素内文本的字符间距、对齐方式、缩进，常用的属性有以下几种

text-align

text-align 属性用来设置元素中文本的水平对齐方式

<p style="text-align: left">左对齐</p>
<p style="text-align: right">右对齐</p>
<p style="text-align: center">居中对齐</p>

text-decoration

text-decoration 属性用于设置或删除文本的装饰，最常用的做法就是使用 text-decoration 属性来删除标签的默认下划线

<p style="text-decoration: underline">带下划线文字</p>
<p style="text-decoration: overline">带上划线文字</p>
<p style="text-decoration: line-through">带贯穿线文字</p>

text-indent

text-indent 属性用来为元素中的文本添加首行缩进的效果

<p style="text-indent: 2em;direction: ltr;">text-indent 属性用来为元素中的文本添加首行缩进的效果，至于是从左侧还是从右侧缩进则取决于 direction 属性定义的文本方向。</p>
<p style="text-indent: 2em;direction: rtl;">text-indent 属性用来为元素中的文本添加首行缩进的效果，至于是从左侧还是从右侧缩进则取决于 direction 属性定义的文本方向。</p>

line-height

line-height 属性用来设置文本的行高

<p style="line-height: 200%">line-height 属性用来设置文本的行高</p>

边框

边框是围绕着元素内容和内边距的一条或多条线段，可以设置这些线段的样式、宽度和颜色，常见的边框属性是以下几种

border-style

border-style 属性用来设置元素中所有边框的样式

<p style="border-style:dotted">border-style 属性</p>

border-width

border-width 属性用来设置元素中所有边框的宽度

<p style="border-width: 2px 2px;border-style: solid">border-width 属性</p>

border

border 属性同时定义一下三个属性：border-width 用来设置边框的宽度；border-style 用来设置边框的样式；border-color 用来设置边框的颜色

<p style="border: 2px dotted red">border</p>

表格

设置表格的布局以及整体外观，常用属性以下几种

table-layout 属性用来设置表格布局时所用的布局算法

border-collapse 属性用来设置是否合并表格中相邻的边框

<table style="table-layout: auto;border-collapse: collapse;" border="2"><tr><th>编号</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>张三</td><td>15</td></tr><tr><td>2</td><td>李四</td><td>11</td></tr>
</table>

列表

设置列表的布局以及整体外观，常用属性以下几种

list-style-type

list-style-type 属性可以设置列表中每个列表项前标记的样式

<ul style="list-style-type: circle"><li>CSS链接</li><li>CSS边框</li><li>CSS表格</li>
</ul>

list-style-position

list-style-position 属性可以设置在何处放置列表项前的标记

<ol style="list-style-position: inside"><li>CSS链接</li><li>CSS边框</li><li>CSS表格</li>
</ol>

list-style-image

list-style-image 属性可以将列表项前的标记替换为一个图像

<!--<ul style="list-style-image: url('../HTML/64960446_p0.jpg')">-->
<!--    <li>CSS链接</li>-->
<!--    <li>CSS边框</li>-->
<!--    <li>CSS表格</li>-->
<!--</ul>-->

总结

CSS是样式非常多，显示效果非常丰富，有兴趣可以查看w3school 在线教程手册试试看