CSS基础笔记
文章目录
- 1.CSS
- 2.Id&Class
- CSS的创建
- 具体属性
- ref
1.CSS
- CSS(Cascading Style Sheets)层叠样式表, 一种用于为结构化文档(HTML文档/XML应用)添加样式(字体, 间距, 颜色等)的计算机语言
- 样式定义如何显示HTML元素, 通常存储在样式表, 样式添加到HTML4.0中是为了解决内容与表现分离的问题
- 外部样式表极大提高工作效率, 通常存储在CSS文件, 扩展名
.css, 多个样式定义可层叠为一个 - 语法: CSS规则由两个主要部分构成: 选择器, 一条/多条声明
- 选择器: 需要改变样式的HTML元素
- 声明: 属性+值; 属性property: 希望设置的样式属性, 每个属性有一个值
- CSS声明总以分号
;结束, 声明总以大括号{}括起来 - 注释
/**/
2.Id&Class
- id选择器
- 标有特定id和HTML元素指定特定的样式
- HTML以id属性来设置id选择器, CSS中id选择器以#定义
- 以下样式规则应用于元素属性
id="para1":
#para1 { text-align:center; color:red; } - class选择器
- 描述一组元素的样式, class选择器有别于id选择器, class可在多个元素使用
- class选择器在HTML以class属性表示, 在CSS中, 类选择器以点
.号显示 - 以下例子中, 所有拥有center类的HTML元素均为居中
.center{text-align:center;}- 以下例子中, 所有p元素使用
class="center"让元素居中
.center{text-align:center;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>
CSS的创建
- 添加方式
- 内联样式: HTML元素中使用style属性
- 内部样式表: HTML文档头部
<head>区域使用<style>属性包含CSS - 外部引用: 使用外部CSS文件(最好的方式)
- 内联样式: 特殊样式需要应用到个别元素
<body style="background-color:yellow;"> <h2 style="background-color:red;">红色背景的标题</h2> <p style="font-family:arial; background-color:green; font-size:20px;">绿色背景的段落</p> <p style="background-color:yellow; text-align:center;">居中对齐的段落</p> </body> - 内部样式表: 单个文件需要特别样式
<head> <style type="text/css"> body {background-color:yellow;} p{color:blue;} </style> </head> - 外部样式表: 样式被许多页面用到, 可更改一个文件来改变整个站点外观
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>- 样式表文件
hr {color:sienna;} p {margin-left:20px;} body {background-image:url("/images/back40.gif");}
- 样式表文件
- 多重样式表: 某些属性在不同样式表中被同样的选择器定义, 属性值将从更具体的样式表被继承
- 多重样式优先级
- 内联样式Inline style > 内部样式Internal style sheet > 外部样式Externalstyle sheet > 浏览器默认样式
具体属性
CSS 背景
不搞前端, 其他以后用到再查吧😪
ref
菜鸟教程 CSS 教程