CSS的总结

news2025/1/15 20:55:29

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

概述

简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS的使用方式

行内样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
    </head>
    <body>
        <p style="font-size: 16px; color: red;">大家好</p>
    </body>
</html>

行内样式需要写到标签的 style 属性值中。
这种形式多用于测试，可维护性较差

内部样式表

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <style>
            p {
                font-size: 16px;
                color: red;
            }
        </style>
    </head>
    <body>
        <p>Hello everyone</p>
    </body>
</html>

内部样式需要写到 <style> 标签中。
通过这种形式定义的样式只在本页面内生效

外部样式表

将样式写到单独的文件中，文件的扩展名为 .css

然后通过 <link> 元素将 index.css 文件引入到页面中：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <link rel="stylesheet" type="text/css" href="./css/index.css">
    </head>
    <body>
        <p>hello world</p>
    </body>
</html>

发中主要是通过这种形式定义样式

基本语法

CSS 样式由一系列的规则集组成，规则集中有一条或多条样式声明。

选择器通常是您需要改变样式的 HTML 元素。
每条样式声明包含着一对属性名和属性值。
属性名和属性值之间以冒号（:）隔开。
样式规则之间以分号（;）隔开。

字体样式属性

font-size:字号大小

font-size属性用于设置字号。推荐使用像素单位px。

px单位名称为像素，像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。

一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。

em是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。

em的值并不是固定的;

font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等

p{ 
    font-family:"Arial","微软雅黑";
}

现在网页中普遍使用16px、字体是微软雅黑

各种字体之间必须使用英文状态下的逗号隔开

尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示

font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用css 来实现。font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）

normal

默认值。定义标准的字符。

bold

定义粗体字符。

bolder

定义更粗的字符。

lighter

定义更细的字符。

100~900

定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

font-style:字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体

normal

默认值，浏览器会显示标准的字体样式。

italic

浏览器会显示斜体的字体样式。

oblique

浏览器会显示倾斜的字体样式。

开发者工具（chrome）

此工具是我们的必备工具，以后代码出了问题，我们首先就是：“按F12”或者是 “shift+ctrl+i” 打开开发者工具。

ctrl+滚轮可以放大开发者工具代码大小。
左边是HTML元素结构右边是CSS样式。
右边CSS样式可以改动数值和颜色查看更改后效果。

CSS注释

CSS规则是使用 /* 需要注释的内容 */ 进行注释的。

p{
  font-size: 14px;                 /* 所有的字体是14像素大小*/
  }

选择器

标签选择器

p {
    font-size: 16px;
    color: red;
}

选择页面中所有的 <p> 元素，给它们设置字体大小和颜色。

Class 选择器

.box {
    font-size: 20px;
    color: green;
}

选择页面中 class 属性值中包含 box 类名的所有元素，给它们设置字体大小和颜色。

ID 选择器

#nav {
    font-size: 24px;
    color: blue;
}

选择页面中 id 属性值是 nav 的元素，给它设置字体大小和颜色。

id选择器和类选择器区别

在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class

类选择器（class）好比人的名字，是可以多次重复使用的

id选择器好比人的身份证号码，全中国是唯一的，不得重复

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果等。

链接伪类选择器

/* 未访问的链接 */
:link   
 /* 已访问的链接 */
:visited 
/* 鼠标移动到链接上 */
:hover
/* 选定的链接 */
:active

a:link会对拥有a标签的属性href=""，即拥有实际链接地址的a对象发生效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 未访问的链接 */
        a:link{
            color: yellow;
        }

        /* 已访问的链接 */
        a:visited{
            color:aqua;
        }
        /* 鼠标放上去 */
        a:hover{
         color: darkmagenta;
        }
        /* 鼠标点着不放 */
        a:active{
            color:blue;
        }


    </style>
</head>
<body>
    <a href="#">百度</a>
    <a href="https://www.baidu.com"></a>
    <div class="box">div元素</div>
    <!-- 注意点：
    在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！    
    a:active 必须位于 a:hover 之后，这样才能生效！ -->
</body>
</html>

外观属性

color：文本颜色

属性值为预定义的颜色名 | 十六进制值的颜色值 | RGB颜色值

一般情况下颜色我们喜欢小写字母比如 #ff0000。

颜色半透明(css3)

语法格式

/* a 是alpha透明的意思,取值范围 0~1之间  */
color: rgba(r,g,b,a)    
color: rgba(0,0,0,0.3)

line-height：行间距

行高是指文本行基线间的垂直距离:基线与基线之间的距离。

属性值：normal |数字 | 长度值 | 百分比

normal：默认值，行高由浏览器自动处理。

长度值：使用长度值设置行高

text-align：水平对齐方式

属性值：left | right | center | justify

left：内容左对齐

center：内容居中对齐

right：内容右对齐

justify：内容两端对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

text-decoration：文本修饰

属性值：none | underline | overline | line-through

none：指定文字无装饰

underline：指定文字的装饰是下划线

overline：指定文字的装饰是上划线

line-through：指定文字的装饰是贯穿线

letter-spacing：字符间距

normal：默认间隔

长度值：用长度值指定间隔，可以为负值

word-spacing（单词）

normal：默认间隔

length：用长度值指定间隔，可以为负值

文字阴影(CSS3)

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。

blur

可选。模糊的距离。

color

可选。阴影的颜色。

/* 多重阴影 */
text-shadow: -5px 0px cyan, 5px 0px red;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/178610.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！