admin管理员组

文章数量:1794759

CSS基础1(参考：菜鸟教程)

CSS基础1(参考：菜鸟教程)

参考链接: CSS教程 | 菜鸟教程 相关文章： HTML基础复习（告一段落） HTML中一些元素/属性的区别（更新中）

目录
  • 1 CSS简介
  • 2 CSS语法
  • 3 CSS属性书写顺序（重点）
  • 4 CSS 常用的选择器
    • 4.1 标签选择器
    • 4.2 id选择器
    • 4.3 class选择器
    • 4.4 通配符选择器
  • 5 CSS创建
    • 5.1 外部样式表
    • 5.2 内部样式表
    • 5.3 内联样式
  • 6 CSS背景
    • 6.1 background-color
    • 6.2 background-image
    • 6.3 background-repeat
    • 6.4 background-position
    • 6.5 background-attachment
    • 6.6 background
  • 7 CSS Text格式
    • 7.1 color属性
    • 7.2 direction属性
    • 7.3 letter-spacing属性
    • 7.4 line-height属性
    • 7.5 text-align属性
    • 7.6 text-decoration属性
    • 7.7 text-indent属性
    • 7.8 text-shadow属性
    • 7.9 text-transform属性
    • 7.10 unicode-bidi属性
    • 7.11 vertical-align属性
    • 7.12 white-space属性
    • 7.13 word-spacing属性
  • 8 CSS Fonts
    • 8.1 font-family
    • 8.2 font-style
    • 8.3 font-size
    • 8.4 font-weight
    • 8.5 font-variant
  • 9 CSS链接
  • 10 CSS列表
  • 10 CSS表格

1 CSS简介
  • CSS(Cascading Style Sheets)层叠样式表。
  • 定义 如何显示HTML。
标准说明解释
结构用于对网页元素整理和分类，现阶段主要学习的是HTML身体
表现用于设置网页元素的版式、颜色、大小等外观样式。主要是指CSS外观
行为指网页模型的定义及交互的编写，主要是Javascript动作
  • 样式通常储存在 样式表 中，外部样式表通常储存在 CSS文件 中。
  • 多个样式定义可层叠为一个。
  • 我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观。
2 CSS语法
  • 选择器【需要改变样式的HTML元素】 + 一条/多条声明
3 CSS属性书写顺序（重点）
  • 盒子布局定位：display/position/float/clear/visibility/overflow
  • 盒子自身属性：width/height/margin/padding/border/background
  • 文本属性：color/font/text-decoration/text-align
  • 其他属性：content/cursor/background
4 CSS 常用的选择器 4.1 标签选择器
  • 直接使用 body 中的标签作为选择器的名字。
4.2 id选择器
  • CSS 中以 # 来定义id选择器。
  • HTML 中以 id属性 来定义id选择器。
  • id选择器可以为标有特定id的HTML元素指定样式。
  • id属性不要以数字开头，部分浏览器无法识别。
  • 写在 head 标签内，约束在 style 标签里。
<!DOCTYPE html> <html lang="zh-CN"> <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>id选择器</title> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1">Hello World</p> <p>这个段落不受影响</p> </body> </html> 4.3 class选择器
  • 用于描述一组元素的样式。
  • 有别于id选择器，class可以使用在多个元素中。
  • CSS 中以 . 来定义类选择器。
  • HTML 中以 class属性 表示。
  • 类名第一个字符不能使用数字。

例1：所有拥有center类的HTML元素均为居中

<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>class选择器</title> <style> .center { text-align: center; } </style> </head> <body> <h1 class="center">标题居中</h1> <p class="center">段落居中</p> </body>

例2：指定特定的HTML元素使用class

<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>class选择器</title> <style> p.center { text-align: center; } </style> </head> <body> <h1 class="center">标题不受影响</h1> <p class="center">段落居中</p> </body>

例3：多个类选择器

<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>多个类选择器</title> <style> .center { text-align: center; } .color { color: #ff0000; } </style> </head> <body> <p class="center color">这是一个示例</p> <p>这个段落不受影响</p> </body> 4.4 通配符选择器
  • 使用*号作为选择器。
  • 可以一次性更改所有元素的样式。
5 CSS创建
  • 多重样式优先级
  • 内联样式> 内部样式 >外部样式 > 浏览器默认样式
5.1 外部样式表
  • 用于样式需要应用到很多页面时。
  • 通过改变一个文件来改变整个站点的外观。
  • 在头部使用<link>标签链接到样式表。

示例 CSS文件

hr { background-color: red; height: 5px; border: none; } p { margin-left: 20px; color: aquamarine; } body { background-color: black; }

HTML文件

<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>外部样式表</title> <link rel="stylesheet" type="text/css" href="mystyle1.css" /> </head> <body> <p>这是一个示例</p> <br /> <hr /> </body> 5.2 内部样式表
  • 用于单个文档需要特殊的样式。
  • 在头部使用 style 标签定义。
<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>内部样式表</title> <style> hr { height: 5px; background-color: sienna; } p { margin-left: 20px; color: aqua; text-align: center; } body { background-image: url("saturn-flat.png"); } </style> </head> <body> <p>这是一个示例</p> </body> 5.3 内联样式
  • 用于仅在一个元素上应用一次。
<body> <p style="color: red; text-align: center;">这是一个示例</p> </body> 6 CSS背景 6.1 background-color
  • 定义元素的背景颜色。
6.2 background-image
  • 设置一个元素的背景图像。
  • 元素的背景是元素的总大小，包括填充和边界，但不包括边距。
  • 默认情况下放置在元素的左上角。
  • 放置多个图像时，先写的在上层。
  • 属性值用时自查。
6.3 background-repeat
  • 设置背景图像平铺。
属性值描述
repeat-x只在水平方向平铺
repeat-y只在垂直方向平铺
no-repeat设置不平铺
6.4 background-position
  • 改变图像在背景中的位置。
6.5 background-attachment
  • 背景图像是否固定或者随着页面的其余部分滚动。
属性值描述
scroll背景图片随着页面的滚动而滚动，默认
fixed背景图片不会随着页面的滚动而滚动
local背景图片会随着元素内容的滚动而滚动
6.6 background
  • 简写属性。
  • 语法：

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

7 CSS Text格式 7.1 color属性 属性值描述
颜色名称颜色的名称，不区分大小写
十六进制十六进制符号 #RRGGBB 或 #RGB
rgb取值是0-255的整数或百分比
rgbaa表示透明度，0=透明
hslhue(0是红色，120是绿色，240是蓝色)
hslsaturation饱和度，0%表示灰色阴影，100%是全色
hsllightness亮度，百分比
hsla和rgba同理
7.2 direction属性
  • 设置文字方向。
属性值描述
ltr默认，文本从左到右
rtl文本方向从右到左
inherit从父元素继承 deriction 的值
<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>文本方向</title> <style> div.exl { direction: rtl; unicode-bidi: bidi-override; /*可以分别尝试有这一句和没有这一句运行结果的不同*/ } </style> </head> <body> <p>一些默认方向的文本</p> <div class="exl">一些文本。从右到左</div> </body> </html> 7.3 letter-spacing属性
  • 定义增加或减少字符间距。
属性值描述
normal默认。规定字符之间没有额外的空间
length定义字符间的固定空间（允许使用负值）
inherit规定从父元素继承属性的值
<head> <style> h1 { letter-spacing: 2px; } h2 { letter-spacing: -3px; } </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> </body> 7.4 line-height属性
  • 设置以百分比计的行高。
属性值描述
normal默认。设置合理的行间距
number设置数字，此数字回合当前的字体尺寸相乘来设置行间距
length设置固定的行间距
%基于当前字体尺寸的百分比行间距
inherit从父元素继承line-height的值
7.5 text-align属性
  • 属性值都很常见了，left,right,center。
  • 给盒子添加该属性，盒子内的行内元素和行内块元素都会水平居中对齐。
属性值描述
justify实现两端对齐文本效果
inherit从父元素继承text-align的值
<style> h1 { text-align: center; } p.date { text-align: right; } p.main { text-align: justify; } </style> <body> <h1>CSS text-align 实例</h1> <p class="date">2022 年 10 月 27 号</p> <p class="main"> “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。” </p> </body> 7.6 text-decoration属性
  • 用于设置或删除文本的装饰。
  • 主要是用于删除链接的下划线。
  • 实际上是 text-decoration-line text-decoration-color text-decoration-style 三种属性的简写。
属性值描述
none默认，定义标准的文本
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through穿过文本的一条线。
inherit继承父元素。
<style> h1 { text-decoration: overline red; } h2 { text-decoration: line-through wavy blue; } h3 { text-decoration: underline dotted green; } a { text-decoration: none; } </style> <body> <h1>这是标题1</h1> <h2>这是标题2</h2> <h3>这是标题3</h3> <a href="www.runoob">菜鸟教程</a> </body> 7.7 text-indent属性
  • 缩进元素中文本的首行。
7.8 text-shadow属性
  • 应用于阴影文本。
  • 语法：

text-shadow: h-shadow v-shadow blur color;

属性值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的距离
blur模糊的距离
color阴影的颜色
7.9 text-transform属性
  • 控制文本的大小写。
属性值描述
none默认。小写字母或大写字母都有
capitalize每个单词的首字母大写
uppercase仅大写字母
lowercase仅小写字母
inherit继承父元素
7.10 unicode-bidi属性
  • 和 direction 属性一起使用，设置文本是否被重写。
  • 便于在同一文档中支持多种语言。
属性值描述
normal默认。不使用附加的嵌入层面
embed创建一个附加的嵌入层面
bidi-override创建一个附加的嵌入层面。重新排序的方向取决于direction属性（ltr/rtl）
initial设置该属性为它的默认值
inherit继承父元素
7.11 vertical-align属性
  • 设置行内元素的基线相对于该元素所在行基线的垂直对齐方式。
7.12 white-space属性
  • 设置元素中空白的处理方式。
7.13 word-spacing属性
  • 设置字间距
8 CSS Fonts
  • 定义字体、加粗、大小、文字样式。
  • 语法：

font-style font-variant font-weight font-size/line-height font-family

属性描述
font在一个声明中设置所有字体的属性
font-style规定字体样式
font-variant规定字体异体
font-weight规定字体粗细
font-size/line-height规定字体尺寸和行高
font-family规定字体系列
8.1 font-family
  • 设置文本的字体系列。
  • 当字体系列的名称超过一个字是需要使用引号。
  • 多个字体系列使用逗号隔开。
  • 属性值就是各种字体的名字，有很多
8.2 font-style
  • 主要用于指定斜体文字的字体样式属性。
属性值描述
normal正常显示文本
italic以斜体字显示文本（使用文字的斜体）
oblique文字向一边倾斜（让没有斜体属性的文字倾斜）
8.3 font-size
  • 用于设置文字的大小。
  • 默认值是16px。
  • 推荐使用em来设置字体大小。
  • 1em的默认大小为16px，em=px/16。
字体大小值区别1区别2
绝对大小设置一个指定大小的文本不允许用户在浏览器中改变文字大小
相对大小相对于周围的元素设置大小允许用户在浏览器中改变文字大小
<style> body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;} </style> 8.4 font-weight
  • 设置字体的粗细
属性值描述
normal默认，对应数是400
bold粗体，对应数是700
bolder更粗
lighter更细
<style> p.normal { font-weight: normal; } p.light { font-weight: lighter; } p.thick { font-weight: bold; } p.thicker { font-weight: 900; } </style> <body> <p class="normal">这是一段话</p> <p class="light">这是一段话</p> <p class="thick">这是一段话</p> <p class="thicker">这是一段话</p> </body> 8.5 font-variant
  • 将所有小写字母转换为大写，但是和其他字母相比尺寸会更小。
属性值描述
normal默认
small-cap显示小型大写字母

9 CSS链接 链接状态描述
a:link未访问链接
a:visited已访问链接
a:hover鼠标移动到链接上时
a:active鼠标点击时
  • 顺序规则：L(link)OV(visited)E and H(hover)A(active)TE
  • 后者必须在前者定义后定义才有效。
<style> a:link, a:visited { display: block; font-weight: bold; color: white; background-color: greenyellow; width: 120px; text-align: center; padding: 4px; text-decoration: none; } a:hover, a:active { background-color: green; } </style> <body> <a target="_blank" href="www.baidu">这是一个链接</a> </body> 10 CSS列表 属性值描述
list-style在单个属性中指定所有的列表属性
list-style-imageURL将指定的图像设置为列表项标志
–none默认，无图形被显示
list-style-positioninside设置列表中列表项标志在文本以内，且环绕文本根据标记对齐
–outside默认值，保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
list-style-type太多了，自查设置列表项标志的类型
-none用于移除小标记
  • 使用list-style时属性设置顺序：type/position/image
<style> ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.a { list-style-type: upper-roman; } ol.b { list-style-type: lower-alpha; } ol.c { list-style-type: none; margin: 0; padding: 0; } </style> <body> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ol class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> 10 CSS表格 <style> caption { caption-side: top; text-align: center; padding-bottom: 20px; } table, th, td { border: 1px solid black; text-align: center; } table { border-collapse: collapse; height: auto; margin-left: auto; margin-right: auto; } th { background-color: green; color: white; padding: 15px; width: 25%; } #odd { background-color: yellowgreen; } </style> </head> <body> <table> <caption>这是一个表格</caption> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr id="odd"> <td>Berglunds snabbköp</td> <td>Christina Berglund</td> <td>Sweden</td> </tr> </table> </body>
  • border-collapse 边框折叠
  • 表格居中有很多种方法，这里使用了页边距居中。

本文标签： 菜鸟基础教程css

版权声明：本文标题：CSS基础1(参考：菜鸟教程) 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686974168a124270.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。