css(层叠样式表)
作用 :
html的样式,配合脚本进行修改格式化样式。
解析:
从右往左
构成:
选择器 声明(属性和值)
选择器:
id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>number</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">受影响</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>number</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">居中</h1>
<p class="center">居中。</p>
</body>
</html>
元素选择器
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
其他选择器:
子选择器
后代选择器
属性选择器
通配符选择器
群组选择器
插入样式表的方法有三种:
-
外部样式表(External style sheet)
<link rel="stylesheet" href="css/style.css"/> @import url @import url("g.css"); .demo1{ color: red; width: 100px; height: 100px; background: blue; }
-
内部样式表(Internal style sheet)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .demo1{ color: red; width: 100px; height: 100px; background: blue; } </style> </head> <body> <div class="demo1"> demo1 </div> </body> </html>
-
内联样式(Inline style)
<div style="color: blue;width: 100px;height: 100px; background: black;">demo2</div>
优先级:
(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
常见的css样式:
注释
注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它
CSS注释以/*
开始, 以*/
结束
快捷键:Ctrl + /
/*这是个一个注释*/
背景
background-color 属性定义了元素的背景颜色
列:body {background-color:#b0c4de;}
background-image 属性描述了元素的背景图像
列:body {background-image:url('https://gitee.com/yiwei-0527/network-security/raw/master/image/login.png');}
列:background-image 属性会在页面的水平或者垂直方向平铺。
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
列:body
{
background-image:url('https://gitee.com/yiwei-0527/network-security/raw/master/image/login.png');
background-repeat:repeat-x;
}
让背景图像不影响文本的排版
列:body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
background-attachment:fixed; 固定,不随内容的滚动而滚动
background-attachment:scroll; 滚动,随内容的滚动而滚动
简写
body {background:#ffffff url('img_tree.png') no-repeat right top;}
文本
颜色
body {color:red;}
对齐方式
h1 {text-align:center;}居中
p {text-align:right;}左对齐
p {text-align:justify;}右对齐
文本修饰
text-decoration属性主要是用来删除链接的下划线
a {text-decoration:none;}
h1 {text-decoration:overline;}上划线
h2 {text-decoration:line-through;}中划线
h3 {text-decoration:underline;}下划线
文本转换
p.uppercase {text-transform:uppercase;}全部大写
p.lowercase {text-transform:lowercase;}全部小写
p.capitalize {text-transform:capitalize;}首字母大写
首行缩进
p {text-indent:50px;}
字间距
letter-spacing:
字体
p {font-style:normal;}正常
p {font-style:italic;}斜体
h1 {font-size:40px;}字体大小
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-weight 指定字体的粗细。
链接
可以和其他css配合使用
a:link {color:#000000;} 未访问链接
a:visited {color:#00FF00;} 已访问链接
a:hover {color:#FF00FF;} 鼠标移动到链接上
a:active {color:#0000FF;} 鼠标点击时
列表
ul.a {list-style-type:circle;}前面试空心圆点
ul.b {list-style-type:square;}前面试实心圆点
ol.c {list-style-type:upper-roman;}空心方块
ol.d {list-style-type:lower-alpha;}实心方块
list-style-image:url('图片地址');前面加图片
list-style-type: none;移除默认样式
表格
指定了一个表格的Th和TD元素的黑色边框
table, th, td
{
border: 1px solid black;
}
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
table
{
border-collapse:collapse;
}
Width和height属性定义表格的宽度和高度
table
{
width:100%;
}
th
{
height:50px;
}
text-align属性设置水平对齐方式,向左,右,或中心
td
{
text-align:right;
}
垂直对齐属性设置垂直对齐,比如顶部,底部或中间:
td
{
height:50px;
vertical-align:bottom;
}
如需控制边框和表格内容之间的间距,应使用td和th元素的填充属性:
td
{
padding:15px;
}
指定th元素的文本和背景颜色
th
{
background-color:green;
color:white;
}
div(盒子模型)
div {
width: 220px;宽
padding: 10px;向外扩展10像素
border: 5px solid gray; 边框加5像素
}
边框
border-style:值
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
边框宽度:
border-width:5px;
边框颜色
border-color:red;
可以单独设置边框:上下左右
border-left:属性: none无边框 hidden隐藏边框 double:双线边框groove : 根据border-color的值画3D凹槽 ridge : 菱形边框 inset : 凹边 outset : 3D凸边
外边距
margin-top:100px;距离上边的距离
margin-bottom:100px;距离下边的距离
margin-right:50px;距离右边的距离
margin-left:50px;距离左边的距离
margin: 100px 50px;上下100 左右50px
内边距:
padding-top:25px;上内边距是 25px
padding-bottom:25px;下内边距是 25px
padding-right:50px;右内边距是 50px
padding-left:50px左内边距是 50px
显示
不让显示
display:none;
显现出来
display:block;
定位
静态定位的元素不会受到 top, bottom, left, right影响。
position: static;
position: static;
元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。
{
position:fixed;
top:30px;
right:5px;
}
相对定位元素的定位是相对其正常位置。
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
h2
{
position:absolute;
left:100px;
top:150px;
}
浮动:
float:
left 元素向左浮动。
right 元素向右浮动
clear: both;清除浮动
1. 块级元素、行内元素
块级元素
他会独占一行,在默认情况下,其宽度自动填满其父元素的宽度;
块级元素可以设置width、height属性;
块级元素即使设置了宽度也是独占一行,块级元素可以设置margin、padding属性;
address 地址
center 举中对齐块
div- 常用块级容易
dl 定义列表
form 交互表单 (只能用来容纳其它块元素)
h标签
hr 水平分隔线
ol 无需列表
ul有序列表
p 段落
pre 格式化文本
行内元素
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到行排不下,就自动换行,其宽度随内容而变化;
行内元素的width、height属性则无效;
行内元素的margin、padding属性很奇怪,水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果,但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。
a - 锚点
b - 粗体(不推荐)
br- 换行
code - 计算机代码(在引用源码的时候需要)
em - 强调
i - 斜体
img - 图片(特殊的内联元素,同时是内联替换元素,替换元素可以设置宽高)
当图片和DIV在一起时,图片周围会出现margin现象,即元素不重合贴在一起,为了解决这个问题,设置img的css为{margin:0;display:block;border:0px}
input - 输入框
label - 表格标签
select - 项目选择
strong - 粗体强调
textarea - 多行文本输入框
u - 下划线
var - 定义变量
替换元素有如下:(和img一样的设置方法)
<img>、<input>、<textarea>、<select>
<object>都是替换元素,这些元素都没有实际的内容
行内元素和块转换
display:block;变成块级元素
display:inline; 变成行内元素
display:inline-block;以块级元素样式展示,以行级元素样式排列
display: flex;弹性盒
溢出
overflow 属性规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。