一, CSS 语法结构
二, CSS 选择器
三, CSS 属性相关
CSS 介绍:
CSS 又称层叠样式表, 用来调节标签的样式, CSS 应该是一个独立的文件
CSS 注释:
/* 这是注释 */
一, CSS 语法结构
CSS 样式由两个组成部分: 选择器和声明. 声明又包括属性和属性值. 每个声明之后用分号结束.
CSS 的三种引入方式:
1. 外部 CSS 文件(最正规的书写方式)
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
2.head 内 style 标签内部直接书写 CSS 代码
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- p{
- background-color: #2b99ff;
- }
- </style>
- </head>
3. 标签内部通过 style 属性直接书写(不推荐)
<p style="color: red">Hello world.</p>
二, CSS 选择器
基本选择器
==1. 标签选择器 (元素选择器)==
- /* div { 将页面上所有的 div 标签内部的文本变成红色} */
- div {
- color:red;
- }
==2. 类选择器 ==
- /* .c1 { 让所有具有 c1 类属性值的标签内部文本变成蓝色} */
- .c1 {
- color: blue;
- }
==3.ID 选择器 ==
- /* #d1 { 将 id 为 d1 的标签内部文本内容改成绿色}*/
- #d1 {
- color: green;
- }
- ==4. 通用选择器 ==
- /* * { !* 页面上所有的标签统一修改样式}*/
- * {
- color: orange;
- }
组合选择器
==1. 后代选择器 ==
- /* div span { 空格表示给 div 内部的 span 标签的文本内容改变样式, 没有层级限制 */
- div span {
- color: red;
- }
==2. 儿子选择器 ==
- /* div> span {> 选择所有父级是 <div> 元素的 <span> 元素 */
- div> span {
- color: green;
- }
==3. 毗邻选择器 ==
- /* div + span { + 表示选择紧挨着 div 的后一个 span 标签 */
- div + span {
- color: green;
- }
==4. 弟弟选择器 ==
- /* div ~ span { ~ div 后面的所有的同级别的兄弟 span 标签 */
- div ~ span {
- color: green;
- }
属性选择器[ ]
- /* 找到页面上所有具有 username 属性名的标签 */
- [username]{
- background-color: deeppink;
- }
- /* 用于选取带有指定属性和值的元素 */
- [username="jason"]{
- background-color: deeppink;
- }
- /* 用于选取属性名是 username 并且属性值叫 jason 的 input 标签 */
- input[username="jason"]{
- background-color: deeppink;
- }
分组和嵌套
== 分组 ==
- /*div,p,span 标签统一设置字体为红色 */
- div,p,span{
- color: red;
- }
== 嵌套 ==
- /* .c1 类内部所有 p 标签设置字体颜色为红色 */
- .c1 p {
- color: red;
- }
标签还可以有自定义的属性 并且可以有多个
伪类选择器
- /* 未访问的链接 */
- a:link {
- color: red;
- }
- /* 鼠标移动到链接上 */
- a:hover {
- color: green;
- }
- /* 选定的链接 */
- a:active {
- color:blue
- }
- /* 已访问的链接 */
- a:visited {
- color: deeppink;
- }
- /*input 输入框获取焦点时样式 */
- input:focus {
- background-color: deeppink;
- }
伪元素选择器
- ==first letter==
- p:first-letter {
- font-size: 48px;
- color: red;
- }
- ==before==
- /* 在每个 < p > 元素之前插入内容 */
- p:before {
- content:"我是头";
- color:red;
- }
- ==after==
- /* 在每个 < p > 元素之后插入内容 */
- p:after {
- content:"?";
- color:blue;
- }
before 和 after 多用于清除浮动.
选择器优先级
1. 选择器相同: 就近原则
2. 选择器不同: 行内> id 选择器> 类选择器> 标签选择器
除此之外还可以通过添加 ! important 方式来强制让样式生效, 但并不推荐使用. 因为如果过多的使用! important 会使样式文件混乱不易维护.
万不得已可以使用! important
三, CSS 属性相关
宽和高
- div {
- width: 200px;
- height: 400px;
- }
- span {
- width: 200px;
- height: 400px;
- }
注意: 块级标签才能设置宽度, 内联标签的宽度由内容来决定
字体属性
- p {
- font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif; /* 设置字体 */
- font-size: 14px; /* 设置字体大小 */
- font-weight: lighter; /* 设置字体粗细 */
- color: yellow; /* 设置字体颜色 */
- /*color: #ffffff;*/
- /*color: rgb(255,103,0);*/
- /*color: rgba(255,103,0,0.4);*/ /* 第四个值指定了色彩的透明度, 它的范围为 0.0 到 1.0 之间 */
- }
文字属性
== 去掉 a 标签默认的自划线:==
- a {
- text-decoration: none;
- }
== 首行缩进 ==
- p {
- text-indent: 32px; /* 若字体大小为 16px, 则缩进两个字符 */
- }
背景属性
- /* 背景颜色 */
- background-color: red;
- /* 背景图片 */
- background-image: url('1.jpg');
- /* 背景重复 */
background-repeat: repeat; 默认, 背景图片平铺排满整个网页
background-repeat: no-repeat; 不平铺
background-repeat: repeat-x: 背景图片只在水平方向上平铺
background-repeat: repeat-y: 背景图片只在垂直方向上平铺
/* 背景位置 */
background-position: 100px 10px; 第一个参数调节左右 第二个调节上下
- /* 支持简写 */
- background: center center url("1.png") red no-repeat ;
- /* 背景图片黏附固定不动 */
- background-attachment: fixed;
边框
边框属性
border-width 边框粗细
border-color 边框颜色
border-style 边框样式
- #d1 {
- border-width: 2px;
- border-style: solid;
- border-color: red;
- }
- /* 边框有四边 每一边都可以设置独有的样式 颜色 粗细 */
border-left-style: none; 无边框
border-right-style: dashed; 矩形虚线边框
border-top-style: dotted; 点状虚线边框
border-bottom-style: solid; 实线边框
- border-left-color: deeppink;
- /* 简写 */
- border: solid 3px red; /* 只要把参数写进去就可以 不需要考虑书写顺序 */
border-radius 画?
将 border-radius 设置为长或高的一半即可得到一个圆形.
- div {
- height: 200px;
- width: 200px;
- border-radius: 50%;
- background-image: url("美女. png");
- background-repeat: no-repeat;
- background-color: red;
- }
display 属性
- <div style="height:50px ; width:50px; background-color: red; display: inline">
- HELLO
- </div>
- <div style="height:50px;width:50px; background-color: green; display: inline">
- hello
- <span style="background-color: red;height: 100px;width: 100px;display: inline-block">
- HELLO
- </span>
- <span style="background-color: green;height: 100px;width: 100px;display: inline-block">
- hello
- </span>
display:"none" 与 visibility:hidden 的区别:
visibility:hidden 可以隐藏某个元素, 但隐藏的元素仍需占用与未隐藏之前一样的空间.
display:none 可以隐藏某个元素, 且隐藏的元素不会占用任何空间.
CSS 盒子模型
margin: 控制标签与标签之间的距离
border(边框): 控制标签的边框
padding: 控制内容与边框之间的距离
content(内容): 控制标签内部的文本内容
==margin 和 padding==
两者的用法规律一致
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- body { margin: 0; } .c1 { height: 100px; width: 100px; background-color:
- red; margin: 50px; /* 上下左右各 50px*/ /*margin: 20px 40px; !* 第一个是上下 第二个是左右
- *!*/ /*margin: 20px 40px 60px; !* 上 左右 下 *!*/ /*margin: 20px 40px 60px
- 80px; !* 上 右 下 左 顺时针 *!*/ } .c2 { margin-top: 20px; height: 100px; width:
- 100px; background-color: cadetblue; padding: 20px; }
- </style>
- </head>
- <body>
- <div class="c1">
- </div>
- <div class="c2">
- </div>
- </body>
- </HTML>
CSS 浮动
在 CSS 中, 任何元素都可以浮动.
浮动元素会生成一个块级框, 而不论它本身是何种元素.
关于浮动的两个特点:
浮动的框可以向左或向右移动, 直到它的外边缘碰到包含框或另一个浮动框的边框为止.
浮动的元素脱离文档流.
left: 向左浮动
right: 向右浮动
none: 默认值, 不浮动
<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <title> Title </title> <style> .left-menu { background-color: #4e4e4e; width: 20%; height: 1000px; float: left; } .right-menu { background-color: wheat; width: 80%; height: 2000px; float: right; } </style> </head> <body> <div class="left-menu"> </div> <div class="right-menu"> </div> </body> </HTML>
浮动的缺陷:
浮动会造成父标签塌陷的问题
clear 属性
专门用来清除浮动所带来的负面影响 父标签塌陷的问题
在写页面之前 先定义好清除浮动的 CSS 代码
.clearfix:after { content: ""; display: block; clear: both; }
结论: 谁塌陷了就给谁加上 clearfix 样式类
注意: 浏览器默认是优先展示文本内容的
overflow 溢出属性
visible 默认值. 内容不会被修剪, 会呈现在元素框之外.
hidden 内容会被修剪, 并且其余内容是不可见的.
scroll / auto 内容会被修剪, 但是浏览器会显示滚动条以便查看其余的内容.
自制圆形头像小例子
<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <title> Title </title> <style> body { margin: 0; background-color: antiquewhite; } .c1 { height: 100px; width: 100px; border-radius: 50%; overflow: hidden; } img { max-width:100% } </style> </head> <body> <div class="c1"> <img src="1.jpg" alt=""> </div> </body> </HTML>
定位 position
所有的标签默认情况下都是静态的(static), 无法做位置的修改.
若想要修改标签位置 需要先将静态改为可以修改的状态
position:relative 相对定位 相对于该元素在文档流中的原始位置, 即以自己原始位置为参照物.
position:absolute 绝对定位 相当于已经定位过的 (static>>>relative) 父标签做偏移. 如小米购物车
position:fixed 固定定位 相当于浏览器窗口固定在某个位置始终不变, 如回到顶部
是否脱离文档流
不脱离
- 相对定位
脱离
- 绝对定位
- 固定定位
z-index
控制 z 轴的距离
z-index 值表示谁压着谁, 数值大的压盖住数值小的
opacity
用来定义透明效果. 取值范围是 0~1,0 是完全透明, 1 是完全不透明.
ps:
optacity 既可以改颜色也可以改文本颜色
rgba 只能改颜色
来源: http://www.bubuko.com/infodetail-3363367.html