CSS基础


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">静夜思</h1>
    <font color="#FF0000">
        <p>床前明月光,</p>
        <p>疑是地上霜。</p>
        <p>举头望明月,</p>
        <p>低头思故乡。</p>
    
    </center>
</body>
</html>
实例: 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修饰更加简洁高效。

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-transformuppercase 文本以大写显示
lowercase 文本以小写显示
capitalize 文本首字母大写
text-decorationnone 删除装饰线
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单词间距

对齐方式

实例
<!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
<center>链接形式</center>
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://file.ztongyang.cn/yang/picttures/QQqr.jpg https://file.ztongyang.cn/yang/picttures/wechatqr.png https://metu.ztongyang.cn/a/avatar.jpg avatar

南玖

生命不息,折腾不止

  网站咨询
  •   当前在线1人
  •   加载耗时44 ms
  •   文章数目40篇
  •   分类总数10个
  •   评论总数46条
  •   站点字数3.84 W
  •   运行时间12天
  访问信息
  •   
  •   2020-08-06 05:45:20 Thu
  •   ?浏览器
  •   操作系统
  热门文章