CSS:一个简单的文档改变所有页面的布局和外观
1.css简介
- 主要规则:以选择器和一个或多个声明组成
- 每条声明由一个属性和一个值组成(每个属性有值。属性和值被冒号分开)
- CSS声明总是以分号(;)结束,声明总以大括号({})括起来
- CSS注释以 /* 开始, 以 */ 结束
2.css选择器
`
(1)id选择器:
- 以"#"来定义
#para1
{
text-align:center;
color:red;
}
<p id="para1">Hello World!</p>`在这里插入代码片
- 不要以数字开头
(2)class选择器:
- 以一个"."点号来显示
- 可在多个元素中使用
3.文本(text)
- text-decoration 属性用来设置或删除文本的装饰。(主要用来删除链接的下划线)
{text-decoration:none;}
- text-transform文本转换(指定一个文本中大写或小写字母)
- text-indent 指定文本第一行缩进
- text-align 文本对齐
- line-height 设置行高
4.css链接
(可以用css任何属性如:颜色,字体等)
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
(当设置为若干链路状态的样式,也有一些顺序规则:
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面)
5.css列表
- 无序列表 ul - 列表项标记用特殊图形(如小黑点、小方框等)
- 有序列表 ol - 列表项的标记有数字或字母
- list-style-type-用于移除小标记
ul.demo {
list-style-type: none;
margin: 0;
padding: 0;
}
6.表格
(1)border属性设置边框 (双边框)
table,th,td
{
border:1px solid black;
}
(2)border-collapse属性(单边框)
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
(3)padding 表格填充(单元格与内容之间空白)
7.盒子模型
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像
(1)当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和外边距。
(2)
8.border边框
(1)border-style属性用来定义边框的样式
border-style的部分值如下:
- dotted: 定义一个点线边框
- dashed: 定义一个虚线边框
- solid: 定义实线边框
- double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
- none:默认无边框
(2)边框可以单独设置单边:top right bottom left
9.轮廓(outline)
:位于边框周围的外围
(可规定样式,颜色,宽度)
(3)注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。
10.css分组和嵌套
(1)分组选择器:相同样式的元素设置样式时可用逗号隔开 (下面h1,h2,p 中的元素均为green)
h1,h2,p
{
color:green;
}
(2)嵌套选择器:可能适用于选择器内部的选择器的样式
- p{ }: 为所有 p 元素指定一个样式
- .marked{ }: 为所有 class=“marked” 的元素指定一个样式
- .marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式
- p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式
11.display(显示
):块和内联元素
- display:none 隐藏元素,不占用空间
- visibility:hidden 隐藏元素,占用空间
- inline 和相邻的内联元素在同一行
- inline-block 等高对齐
- display-block:两个元素之间的换行符
span
{
display:block;
}
<span>display 属性值为 "block" 的结果</span> <span>这两个元素之间的换行符。</span>
即:display 属性值为 “block” 的结果
这两个元素之间的换行符。
12.Position(定位)
- static: 无特殊定位,遵循正常的文档流对象
- fixed: 相对浏览器的位置是固定的,即使窗口移动它也不滚动
- relative: 定位是相对其正常位置定位的
- absolute: 相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:
- sticky(粘性定位):,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
- z-index(堆叠 那个元素在前,那个元素在后):
若:z-index:-1; 则在后
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
left:-20px 即 从左侧最开始减去20px
left:20px 即 从左侧最开始加上20px
13.css Overflow
:用于控制内容溢出元素框时显示的方式。
overflow:添加滚动条
overflow: visible:内容溢出元素框
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: visible;
}
即:
14.Floathe(浮动)
:元素只能左右移动
- float属性:几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻 (float:left)
- clear属性:元素浮动之后,周围的元素会重新排列,而clear 属性则指定元素两侧不能出现浮动元素。
(1)段落第一个字母大写:
span
{
float:left;
width:1.2em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
<span>这</span>是一些文本。
如下:
(2)标题和图片向右浮动:
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
<div>
<img src="logocss.gif" width="95" height="84" /><br>
CSS is fun!
</div>
如下:
15.css布局 水平&垂直对齐
:
- 仅仅为了文本在元素内居中对齐:text-align:center
- 水平居中块级元素 (如 div):margin-auto
- 左右对齐,使用position定位:
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
<div class="right">
<p>菜鸟教程 -- 学的不仅是技术,更是梦想!!</p>
</div>
如下:
- 图片居中对齐可用:margin-auto
img {
display: block;
margin: 0 auto;
}
- 右对齐用 float方式:float:left(若子元素高度大于父元素,且子元素设置了浮动,那么子元素将溢出,可通过使用"clearfix"清除浮动来解决或者父元素上添加overflow:auto)
- 垂直居中对齐用:padding
.center { padding: 70px 0; border: 3px solid green; }
- 水平垂直都对齐:padding和text-align:center
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
- 垂直居中:line-height
- 垂直居中还可以:padding和transform
16.组合选择符
- 后代选择器(以空格 分隔)
- 子元素选择器(以大于 > 号分隔)
- 相邻兄弟选择器(以加号 + 分隔)
- 普通兄弟选择器(以波浪号 ~ 分隔)
17.伪类
- p:first-child:匹配第一个p元素
- p>i:first-child:所有p元素中的第一个i元素
- p:first-child i:匹配所有作为第一个子元素中的所有的i元素
伪元素
- p:first-line{}:对p元素的第一行文本进行格式化
- first-letter:向文本首字母设置样式
- :before:可以在元素的内容前面插入内容
- :after:可以在元素的内容后面插入新内容
- :focus选择器:一个输入字段获得焦点时选择的样式
18.导航栏
- 激活/当前导航条
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
<h2>垂直导航条</h2>
<p>在点击了选项后,我们可以添加 "active" 类来标准哪个选项被选中。</p>
<ul>
<li><a class="active" href="#home">主页</a></li>
如下
- 添加分割线
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li:last-child {
border-right: none;
}
如下
19.下拉菜单
:dropdown
dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。