CSS简介与基本语法

简介

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

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

是一种标记语言，主要用于布局和美化页面。

实例: 纯HTML修饰

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS-01</title>
    </style>
</head>
<body>
    <center>
        <h1><font color="#0000FF">静夜思</font></h1>
    <font color="#FF0000">
        <p>床前明月光，</p>
        <p>疑是地上霜。</p>
        <p>举头望明月，</p>
        <p>低头思故乡。</p>
    </font>
    </center>
</body>
</html>

效果：

CSS-01

静夜思

床前明月光，

疑是地上霜。

举头望明月，

低头思故乡。

实例: CSS修饰美化

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS-01</title>
    <style type="text/css">
        h1 {color: #0000FF;}
        p {color: #FF0000;}
    </style>
</head>
<body>
    <center>
        <h1>静夜思</h1>
        <p>床前明月光，</p>
        <p>疑是地上霜。</p>
        <p>举头望明月，</p>
        <p>低头思故乡。</p>
    </center>
</body>
</html>

效果：

CSS-01

静夜思

床前明月光，

疑是地上霜。

举头望明月，

低头思故乡。

通过上面两个实例，我们可以看到，两个例子实现的效果是一样的，但是CSS修饰更加简洁高效。

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

总体来说，CSS具有以下特点(来自百度百科)

丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

基本语法

选择器
属性
属性值

语法：

<style type="text/css">
    选择器 {对象属性:对象属性值;}
</style>

CSS样式表

内部样式表

主要适用于当前页面，CSS代码与网页HTML代码在同一个文件中。分为行内样式和嵌入样式

行内样式: style属性,形如样式<td style="font-size: 50px">测试</td>
嵌入样式: <style> 在<head>标签中

外部样式表

适用于网站的整体风格，独立于HTML文件，后缀.css,不同HTML文件可以调用(通过链接)相同的CSS文件。<link rel="stylesheet" type="text/css" href="CSS文件链接/路径">

实例

@charset "utf-8";

body {
    font-size: 12px;
    line-height: 22px;
    color: #FF0000;
}

CSS选择器

对HTML实现一对一、一对多或多对一控制，类选择器和标签选择器，优先级：类选择器>标签选择器。

标签选择器: 当需要对页面内某些标签进行修饰
类选择器: 可以实现部分标签生效
- 定义样式： .类名 {属性：属性名;}
- 应用样式

标签选择器

语法格式:

标签名 {
    属性名1：属性值；
    属性名2：属性值；
    属性名3：属性值；
    ……
}

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test demo</title>
    <style type="text/css">
        li {
            font-style: italic;
            font-size: 50px;
            font-family: 隶书;
            background: #900;
            color: #090;
        }
    </style>
</head>
<body>
    <ul>
        <li>手机</li>
        <li>电视</li>
        <li>DVD</li>
    </ul>
</body>
</html>

效果展示

类选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test demo1</title>
    <style type="text/css">
        li {
            font-style: italic;
            font-size: 50px;
            font-family: 隶书;
            background: #900;
            color: #090;
        }
        .size {
            font-size: 50px;
            background: #090;
            color: #900;

        }
    </style>
</head>
<body>
    <ul>
        <li class="size">手机</li>
        <li>电视</li>
        <li>DVD</li>
    </ul>
</body>
</html>

效果展示

ID选择器

ID是HTML元素中的唯一标识，对应的ID选择器一般用于对应的ID标识的HTML元素
语法格式：

<p id="id01"></p>
#ID标识名 {
    属性名1：属性值；
    属性名2：属性值；
    属性名3：属性值；
    ……
}

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test ID</title>
    <style type="text/css">
        #one {
            font-size: 50px;
        }

        #two {
            font-size: 80px;
        }

        #three {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <p id="one">一去二三里</p>
    <p id="two">一去二三里</p>
    <p id="three">一去二三里</p>
</body>
</html>

效果展示

优先级: ID–>class–>标签

颜色

颜色解析

RGB
十六进制编码
色调
饱和度
亮度
对比度

前景色

color指定方式：

RGB
十六进制编码(两位一个值，一共三个值)
颜色英文名

背景色

background-color指定方式：

RGB
十六进制编码(两位一个值，一共三个值)
颜色英文名

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>color test</title>
    <style type="text/css">
        h1 {
            color: red;
        }

        h2 {
            color: #EE3E80;
        }

        p {
            color: rgb(100,100,100);
        }

        h3 {
            background-size: 30px;
            background-color: green;
        }
    </style>
</head>
<body>
    <h1>test</h1>
    <h2>test</h2>
    <p>test</p>
    <h3>hello,world</h3>
</body>
</html>

效果展示

文本

字体与类型

属性	值或作用
font-family	指定字体
font-size	字体大小，可通过像素、百分数、EM值表示
@font-face	访问更多字体
text-transform	uppercase 文本以大写显示 lowercase 文本以小写显示 capitalize 文本首字母大写
text-decoration	none 删除装饰线 underline 文本底部增加实线 overline 文本顶部增加实线 line-through 通过一条实线穿过文字 blink 文本动态闪烁

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test font</title>
    <style type="text/css">
        h1 {
            font-family: Georgia,Times,serif;
            font-size: 20px;
            text-transform: uppercase;
            text-decoration: underline; 
        }
        h2 {
            font-family: Arial,Verdana,sans-serif;
            font-size:40px;
            text-transform: lowercase;
            text-decoration: none;
        }
        h3 {
            text-decoration: blink;
        }
        .credits {
            font-family: "Courier New",Courier,monospace;
            font-size: 60px;
            text-transform: capitalize;
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <h1>i love china</h1>
    <h2>i love china</h2>
    <h3>i love china</h3>
    <p class="credits">i love china</p>
</body>
</html>

效果展示

间距控制

属性	作用
line-height	行间距
letter-spacing	字母间距
word-spacing	单词间距

对齐方式

对齐

属性	值	作用
text-align	left	左对齐
	right	右对齐
	center	居中对齐
	justify	两端对齐
vertical-align	baseline	默认。元素放置在父元素的基线上。
	sub	垂直对齐文本的下标。
	super	垂直对齐文本的上标
	top	把元素的顶端与行中最高元素的顶端对齐
	text-top	把元素的顶端与父元素字体的顶端对齐
	middle	把此元素放置在父元素的中部。
	bottom	把元素的顶端与行中最低的元素的顶端对齐。
	text-bottom	把元素的底端与父元素字体的底端对齐。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>对齐方式测试</title>
    <style type="text/css">
        .p1 {
            text-align: left;
        }
         .p2 {
            text-align: center;
        }
         .p3 {
            text-align: right;
        }
         .p4 {
            text-align: justify;
        }
    </style>
</head>
<body>
    <p class="p1">空山新雨后</p>
    <p class="p2">天气晚来秋</p>
    <p class="p3">明月松间照</p>
    <p class="p4">清泉石上流</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>test div</title>
    <style type="text/css">
        .p {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <center>
        <div style="width: 800px;height: 400px; background-color: #9FF">
        <h2>这是块级标签所包含的内容：</h2>
        <p class="p">一去二三里，</p>
        <p class="p">烟炊四五家。</p>
        <p class="p">亭台六七座，</p>
        <p class="p">八九十支花。</p>
    </div>
    </center>
</body>
</html>

效果：

块级标签包含行级标签

效果展示

链接

美化

color
font-family
background

链接形式
a:link	普通
a:visited	访问过的
a:hover	鼠标放在链接上时
a:active	鼠标点击时

实例

<!DOCTYPE html>
<html>
<head>
    <title>test link</title>
    <style type="text/css">
        a:link {color: #FF0000;} /*未被访问过的链接*/
        a:visited {color: #00FF00;} /*被访问过的链接*/
        a:hover {color: #FF00FF;} /*鼠标移动到链接上*/
        a:active {color: #0000FF;} /*当鼠标点击链接时*/
    </style>
</head>
<body>
    <center>
            <p><b><a href="http://www.ztyangjoy.cn" target="_blank">点击访问冷大大猫博客</a></b></p>
    </center>
</body>
</html>

列表

list-style-type	改变列表项标志类型
list-style-image	改变列表标志为图像

冷大大猫

https://ztyangjoy.cn/2019/09/03/css-ji-chu/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源冷大大猫 !

前端 CSS

JavaScript入门

关于JavaScript的基础学习历程，不断学习不断更新不断记录

2019-09-05 JavaScript

前端 JavaScript

HTML基础

记录自己前端学习过程中的HTML入门基础知识。

2019-08-30 HTML

前端 HTML

CSS简介与基本语法

简介

实例: 纯HTML修饰

静夜思

实例: CSS修饰美化

静夜思

基本语法

CSS样式表

内部样式表

外部样式表

实例

CSS选择器

标签选择器

实例

类选择器

ID选择器

实例

颜色

颜色解析

前景色

背景色

实例

文本

字体与类型

实例

间距控制

对齐方式

实例

标签

实例

链接

实例

列表

给我打钱，我要买可乐