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

文章目录

• CSS简介
• CSS的语法规则
• • 选择器
  • • id选择器
    • 元素选择器
    • 类选择器
    • 选择器优先级
  • CSS注释
• CSS常用设置样式
• • 颜色
  • • 颜色名称(常用)
    • RGB(常用)
    • RGBA(常用)
    • HEX(常用)
    • HSL
    • HSLA
  • 背景
  • • background-color
    • background-image
    • background-size
  • 字体
  • • text-align
    • text-decoration
    • text-indent
    • line-height
  • 边框
  • • border-style
    • border-width
    • border
  • 表格
  • 列表
  • • list-style-type
    • list-style-position
    • list-style-image
• 总结

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 在线教程手册试试看