前端之CSS(一)
一、什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
样式解决了一个很大的问题
HTML 标签原本被设计为用于定义文档内容，如下实例：
<h1>这是一个标题</h1> <p>这是一个段落。</p>
样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
二、CSS实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例(runoob.com)</title>
<style>
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
</head>
<body>
<h1>这个标题设置的大小为 36 pt</h1>
<h2>这个标题设置的颜色为蓝色：blue</h2>
<p>这个段落的左外边距为 50 像素：50px</p>
</body>
</html>
三、CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
四、CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 "/*" 开始, 以 "*/" 结束,
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
五、选择器
1.基本选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
还有标签选择器 span、div...，通用选择器*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器 所有span标签的颜色都是红色*/
span {
color: red;
}
/*id选择器*/
#s1 {
font-size: 24px;
}
/*类选择器*/
.c1 {
color: orange;
}
/*通用选择器*/
* {
color: blue;
}
</style>
</head>
<body>
<span id="s1">span</span>
<div class="c1">div
<p>p
<span>span</span>
</p>
</div>
<div class="c1">div</div>
</body>
</html>
2.组合选择器
- 后代选择器(以空格分隔)
- 子元素选择器(以大于号分隔）
- 相邻兄弟选择器（以加号分隔）
- 普通兄弟选择器（以破折号分隔）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器 div里面所有的span标签都变成蓝色*/
div span{
color: blue;
}
/*儿子选择器*/
div>span {
color: red;
}
/*毗邻选择器 对下不对上*/
div+span {
color: blue;
}
/*弟弟选择器 对下不对上*/
div~span {
color: deeppink;
/*}*/
</style>
</head>
<body>
<span>我是div上面的span</span>
<div>
<span>我是div里面的第一个span</span>
<p>我是div里面的第一个p
<span>我是div里面的第一个p里面的span</span>
</p>
<span>我是div里面的第二个span</span>
</div>
<span>我是div下面的第一个span</span>
<span>我是div下面的第二个span</span>
</body>
</html>
3.属性选择器
具有特定属性的HTML元素样式不仅仅是class和id,下面是自定义属性（xxx）的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*只要有xxx属性名的标签都找到*/
[xxx] {
color: red;
}
/*只要标签有属性名为xxx并且值为1*/
[xxx='1'] {
color: blue;
}
/*规定p标签内部必须有属性名为xxx并且值为2的标签*/
p[xxx='2'] {
color: green;
}
</style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>我只有属性名</p>
<p xxx="1">我有属性名和属性值并且值为1</p>
<p xxx="2">我有属性名和属性值并且值为2</p>
</body>
</html>
4.伪类选择器
CSS伪类是用来添加一些选择器的特殊效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*提示信息默认颜色*/
a:link {
color: red;
}
/*鼠标悬浮时颜色*/
a:hover {
color: yellow;
}
/*鼠标点击时颜色*/
a:active {
color: black;
}
/*进入网址返回后的颜色*/
a:visited {
color: green;
}
/*点击提示信息，自动聚焦输入框，红背景色*/
input:focus {
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<input type="text">
</body>
</html>
5.伪元素选择器
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
":before" 伪元素可以在元素的内容前面插入新内容。
":after" 伪元素可以在元素的内容之后插入新内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*调整首字颜色，大小*/
p:first-letter {
color: red;
font-size: 24px;
}
/*首字前添加绿色*/
p:before {
content: '*';
color: green;
}
/*行末添加粉色？并调整大小*/
p:after {
content: '?';
color: deeppink;
font-size: 48px;
}
</style>
</head>
<body>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
</body>
</html>
6.分组、嵌套
分组选择器
在样式表中有很多具有相同样式的元素。
嵌套选择器
它可能适用于选择器内部的选择器的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color: red;
}
p {
color: red;
}
span {
color: red;
}
/*分组*/
div,p,span {
color: blue;
}
/*嵌套:不同的选择器可以共用一个样式
后代选择器与标签组合使用
*/
div p,span {
color: red;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<span>span</span>
</body>
</html>
7.选择器优先级
相同选择器，不同引入方式：就近原则
不同选择器，相同引入方式：行内样式>ID选择器>类选择器>标签选择器
六、CSS 文本格式
1.文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { color: red; color: rgb(0,0,255); color: #FF6700; color: rgba(0,0,255,0.8); } </style> </head> <body> <p>浏览器会使用吗</p> </body> </html>
2.文本的对齐、修饰方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
text-align: right;
/*text-decoration: underline;*/
/*text-decoration: overline;*/
text-decoration: line-through;
text-indent: 48px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>以把多个字体名称作为</p>
<a href="http://www.xiaohuar.com">笑话网</a>
</body>
</html>
七、CSS3 背景
CSS3中包含的背景属性，提供背景元素控制。
- background-image 添加背景图片
- background-size 指定背景图像的大小
- background-repeat 背景图片平铺位置
- background-position 指定背景位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: green;
background-image: url("1.png");
background-repeat: no-repeat;
background-position: center;
background: no-repeat center url("1.png") blue ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
八、CSS 边框、圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border-width: 3px;
border-style: dashed;
border-color: deeppink;
border: 3px solid red;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: red;
border: 3px solid black;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
九、display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div {*/
/*display: none;*/
/*}*/
/*inline将块儿级标签变成行内标签*/
/*div {*/
/*display: inline;*/
/*}*/
/*span {*/
/*display: block;*/
/*}*/
/*将选择的标签既具有行内标签特点又有块儿级标签的特点*/
span {
display: inline-block;
height: 400px;
width: 400px;
background-color: red;
border: 3px solid black;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>
