CSS基础

技术2024-03-09 86

CSS 介绍

全称层叠样式表 (Cascading Style Sheets)，用于实现页面的样式。 css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。而css就可以分别为网页的各个层次设置样式。

基本语法

CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。语法：

选择器 { 样式名:样式值; 样式名:样式值; } p { color:red; font-size:12px; }

书写位置

行内样式 <p style="color: red; font-size: 24px;">这是一个p标签</p>内部样式 <style>p{color: red;font-size: 24px;}</style>外部引入 <link rel="stylesheet" href="style.css">区别行内样式：定位准确,不能够复用。内部样式：不能复用。外部样式：常用方式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title>   <link rel="stylesheet" href="style.css" />  <style> /* 语法: 选择器{ 样式名:样式值; 样式名:样式值; } */ /* 分号不能省略 */ p { color: orange; font-size: 16px; } </style> </head> <body>    <p style="color: red; font-size: 24px;">我是一个P标签</p> <p>我是内部样式的p标签</p> </body> </html>

CSS 选择器

选择器（selector），会告诉浏览器：网页上的哪些元素需要设置什么样的样式。比如：p这个选择器就表示选择页面中的所有的p元素，在选择器之后所设置的样式会应用到所有的p元素上。

简单选择器标签选择器 : 用标签名选取。id 选择器 : 根据设置好的唯一ID值选取。（#name{}）class 选择器 : 可以有多个名称。（.name{}） /* 标签选择器 */ p{ color：red； } /* id选择器 */ #h3{ color: orange; } /* class选择器 */ .header{ color:blue; } 复杂选择器交集选择器 : 选择器1.选择器2{ }并集选择器：选择器1,选择器2,选择器3 { }后代选择器 : 空格子代选择器：>通配符 : * /*标签p 和.p1的交集*/ p.p1 { color: red; } .p2.danger { color: blue; } /*并集选择器都被选中*/ .p1, .p2 { font-size: 30px; } /*后代选择器空格*/ .p3 a { color: red; } /** 通配符选择所有标签*/ * { /*background-color: pink;*/ } /* 子代选择器标志 > */ .box>a{ color: red; } 给链接定义样式(伪类)

有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。

正常链接 a:link访问过的链接 a:visited （只能定义字体颜色）鼠标停留的链接 a:hover正在点击的链接 a:active焦点的链接a:focus

CSS 常用属性

属性名称属性作用值width / height宽高px 百分比 em 等background-color背景颜色colorcolor字体颜色colorfont-size字体大小px em 等text-align文字对齐方式center left righttext-indent首行缩进px em 等font-family字体微软雅黑 Microsoft YaHei、黑体 SimHei、Arial 等font-weight字体加粗100-900.加粗 700-900/ bolder lighter normalfont-style字体样式Italic 斜体 / normal 正常line-height行高单位： px /倍数 / 百分比 ;- 设置文字的行间距- 单行文字垂直居中：行高=父类盒子高度font字体缩写`font:italic bolder 20px/1.2 ‘Arial’,‘Microsoft YaHei’

font-family

可以同时指定多个字体

例如： p{font-family:Arial , Helvetica , sans-serif}

如上我实际上指定了三种字体，那么到底使用的是哪个呢？浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。这里面 sans-serif 并不是指的具体某一个字体。而是一类字体。

字体分类

serif（衬线字体）sans-serif（非衬线字体）monospace （等宽字体）cursive （草书字体）fantasy （虚幻字体）以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。

line-height

line-height用于设置行高，行高越大则行间距越大。

文本的修饰

text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。可选值：

underlineoverlineline-throughnone

字母间距和单词间距

letter-spacing 用来设置字符之间的间距。 word-spacing 用来设置单词之间的间距。

这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。

文本对齐

text-align用于设置文本的对齐方式。

可选值：

left：左对齐right：右对齐justify：两边对齐center：居中对齐

Processed: 0.026, SQL: 9