初涉前端之CSS
1.css介绍
CSS是前端在HTML之前所走的后续工作，CSS的学名叫做层叠样式，他是用来定义如何来显示我们写的HTML元素的；当一个浏览器读取到了一个样式表，他就会按照这个样式来渲染你的HTML。
2.CSS的语法结构
每个CSS都是由两个部分组成：选择器和声明，声明包括属性名和属性值，再者必须要以分号结尾。
3.CSS的注释写法
/*注释的内容*/
/*注释是代码之母*/
4.CSS引入的几种方式
-
行内样式：是标记的style属性中设定的CSS样式。
<div style="color: red">Hello World!</div>2.内部样式：嵌入式是将CSS样式集中写在网页的head标签中，将要写的装饰代码写在一组style中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3.外部样式：通过link标签将单独写在后缀为.css文件里的样式引入进来。
<link href="你的css文件路径" rel="stylesheet" type="text/css" />
5.CSS选择器
1.基本选择器
元素标签选择器
p {color: red;}
ID选择器
#i1 {background-color: green;}
类选择器
.niubi {font-size: 14px;}
.hah {font-weight: 500;}
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
通用选择器
/*清除页面的所有布局*/
* {
margin: 0;
padding: 0;
}
2.组合选择器
后代选择器
/*div内部的span标签设置字体颜色*/
div span {
color: red;
}
儿子选择器
/*选择所有父级是div元素的p元素, 设置字体加粗*/
div>p {
font-weight: 500;
}
毗邻选择器
/*选择所有紧接着div元素的p元素*/
div+p {
color: orange;
}
弟弟选择器
/*i1后面所有的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;
}
3.属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
6.分组选择器
分组:当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：
div,p {
color: pink;
}
嵌套:多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
.c1 p {
color: red;
}
7.伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
8.伪类选择器
常用的给首字母设置特殊的样式：
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;
}
after
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
before和after多用于清除浮动。
9.选择器的优先级
/*
行内样式的style > id选择器 > 类选择器 > 标签元素选择器
*/
10.CSS相关属性
1.宽和高
| width | 设置元素的宽度 |
|---|---|
| height | 设置元素的高度 |
块级标签才能设置宽度，内联标签的宽度由内容来决定。
2.字体属性
字体的样式和字体的大小
/* 属性实例子*/
body {
font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
}
p {
font-size: 14px;
}
/*如果设置成inherit表示继承父元素的字体大小*/
字体的粗细（字重）
font-weight用来设置字体的字重（粗细）。
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
首行缩进
将段落的第一行缩进 32像素：
p {
text-indent: 32px;
}
背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
支持简写：
background:#336699 url('aaa.png') no-repeat left top;
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
案例:图片不动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c0 {
height: 400px;
background-color: darkslateblue;
}
.box {
height: 400px;
/*background-color: red;*/
background: url("本地的图片路径") no-repeat center center;
background-attachment: fixed;
}
.c1 {
height: 400px;
background-color: aqua;
}
.c2 {
height: 400px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="c0"></div>
<div class="box"></div>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
5.边框
边框属性
- border-width
- border-style
- border-color
#i1 {
border- 2px;
border-style: solid;
border-color: red;
}
通常使用简写方式：
#i1 {
border: 2px solid red;
}
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
display属性
用于控制HTML元素的显示效果。
| 值 | 意义 |
|---|---|
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。