CSS 基础

文章目录

- CSS 常见的属性
- CSS 常见样式
- - 行内样式
  - 内嵌样式
  - 导入样式
- CSS 选择器
- - 标签选择器
  - id选择器
  - 类选择器
  - 全局选择器
  - 属性选择器
  - 组合选择器
- CSS 常见应用
- - 表格
  - 列表
  - 导航栏
  - 下拉菜单
  - 提示工具
  - 图片廊

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为 .css。CSS是用于控制网页样式并允许将样式信息和网页分离的一种标记语言。

该样式定义了如何显示 HTML 元素，通过使用 CSS 我们可以大大提升网页开发的工作效率！

CSS语法格式：CSS声明总是以分号 ; 结束，声明总以大括号 {}括起来:

标签名 
{
	属性名1:属性值1;
	属性名2:属性值2;
	属性名3:属性值3;
	...
}

选择器一般放在head的元素中。

CSS 常见的属性

字体属性

font-family：设置字体类型，如font-size: “宋体”。
font-size：设置字体大小，px 为像素，em 自动使用大小，方便放大缩小字体，一般使用em，1em=16px。
font-style：设置字体风格样式，normal 为正常，italic 为倾斜，oblique 也为倾斜。
font-weight：设置字体粗细，normal 为正常，bold 为加粗，lighter 为变细。

文本属性

text-decoration：对文本进行装饰，none 为正常，overline 为上滑线，underline 为下滑线，line-through 为删除线。
text-indent：文本缩进，中文一般为2em。
text-align：对齐方式，left 为左对齐，right 为右对齐，center 居中对齐，justify 两端对齐。
text-transform：大小写字母转换，uppercase 为大写，lowercase 为小写，capitalize 为首字母大写。
direction：文本方向，rtl 为右对齐，ltr 为左对齐，也是默认值。
color：文本颜色。
letter-spacing：设置字符间距，normal 为正常，还有如2px。
word-spacing：设置单词间距，normal 为正常，还有如30px。

尺寸属性

height：设置元素的高度，默认auto，还有如100px。
width：设置元素的宽度，默认auto，还有如100px。
line-height：设置行高，默认normal，还有如200%。

背景属性

background-color：设置元素背景色。
background-size：设置背景大小。
background-image：把图像设置为背景。
- url(‘URL’) URL为图像地址。
- linear-gradient() 渐变，如linear-gradient(blue, red)为垂直从上到下渐变，linear-gradient(to right, red , yellow) 为水平从左到右渐变，linear-gradient(to bottom right, red , yellow) 为从左上角到右下角渐变。
- radial-gradient() 径向渐变，如radial-gradient(red, yellow, green)为椭圆渐变，radial-gradient(circle, red, yellow, green)为圆渐变。
background-position：设置背景的位置。
background-repeat：设置如何重复背景图像，默认repeat为水平和垂直方向重复，no-repeat不重复。
background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。默认scroll为随着页面的滚动而滚动，fixed 为不会随着页面的滚动而滚动，local 为随着元素内容的滚动而滚动。

CSS 常见样式

行内样式

只能用于当前标签。可以直接在标签中添加属性style。

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>行内样式title>
head>
<body>

<p style="background-color: red;color: black;font-size: 20px;">Python网络爬虫p>

<p style="color: blue;font-style: italic;">Python网络爬虫p>
body>
html>

内嵌样式

只能用于当前页面。内嵌样式就是在标签中使用