web前端之 CSS
CSS概述
CSS 指层叠样式表 (Cascading Style Sheets),说白了就是给html代码穿上好看的衣服，让页面变得好看
CSS存在形式
1、在标签的属性中设置，优先级较高
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 使用style属性给标签添加css样式 -->
<div style="background-color:red; color:white"> <!-- 给div添加红色背景，并且div里面的字体颜色为白色 -->
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
效果图如下
2、在style标签中设置 优先级低于标签选择器
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: red;
color: white;
}
</style>
</head>
<body>
<div>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
效果图如下
3、在css文件中设置，然后在html的头部中引入该css文件
代码如下
- main.css代码
/*css样式表*/
div {
background-color: red;
color: white;
}
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
效果图如下
4、!important 强制优先级最高
代码入下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
在css中，如果样式发生冲突，默认是最下面的优先级最高，但是给样式指定!important之后，该样式则优先级为顶级，不管该样式放在那里，优先级都为最高优先级
*/
.c1{
background-color: yellow;
color: white !important; /* 强制优先级最高,这条生效 */
}
.c2{
background-color: red; /* 这条生效 */
color: green;
}
</style>
</head>
<body>
<div class="c1 c2">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
效果图如下
5、绝对路径高于相对路径
代码入下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{
color: red;
}
/* 绝对位置样式优先级高于下面的.b相对位置样式 */
.a .b{
color: #00a2ca;
}
.c{
color: #0000aa;
}
.b{
color: #4e515e;
}
</style>
</head>
<body>
<div class="a">
aa
<div class="b">bb</div>
</div>
<div class="c">
<div class="b">cbb</div>
</div>
</body>
</html>
效果图如下
CSS选择器 -- 找到标签
在我们给html代码添加样式之前，先要找到对应的标签才可以给标签添加相应的样式
1、标签选择器
使用标签进行定位，例如下面的代码，针对当前html文件中所有的div标签生效
div{background-color:red;}
2、class选择器
使用class属性进行定位，例如下面的代码，针对所有标签中class属性等于top的标签生效
.top{
background-color: red;
}
3、id选择器
使用id属性进行定位，例如下面的代码，针对所有标签中id属性等于s1的标签生效,在html代码中，id属性的值要唯一
#s1{
background-color: red;
}
4、层级选择器
比如我想对div标签下面的a标签进行设置
div a{
background-color: red;
}
5、组合选择器
比如需要将div标签，p标签，input标签的背景颜色设置为红色
div,p,input{ background-color:red; }
6、属性选择器
html代码：
<div>
<div class="c1" a="1">a</div>
<div class="c1" a="2">b</div>
<div class="c1">c</div>
<div class="c1">d</div>
<div class="c1" a="1">e</div>
</div>
css样式代码：
.c1[a='1']{
color: red;
}
css样式
一些基本的css样式
color: red; /*字体颜色为红色*/
width: 40px; /*宽度40像素*/
height: 50px; /*高度50像素*/
backgroud /*设置背景*/
backgroud-color: red; /*背景颜色*/
background-image: url("xxx.jpg"); /*背景图片*/
background-repeat: (no-repeat;repeat-x;repeat-y); /*设置背景图片是否重复，以及如何重复*/
background-position: -105px -112px; /*显示大图中的某一小块，比如 background-image:url('image/5.png'); height: 80px;background-repeat:no-repeat; background-position:-105px -112px;*/
设置透明度：
opcity: 0.6;
backgroud:rgb(0, 0, 0, .6);
border /*设置边框*/
<div style="border:1px solid red; height: 10px;"></div> /*实线：solid 虚线：dotted dashed */
margin /*外边距*/
margin-top: 20px; /*上边距*/
margin-bottom: 20px; /*下边距*/
margin-right: 20px; /*右边距*/
margin-left: 20px; /*左边距*/
padding /*内边距*/
padding-top: 20px; /*上边距*/
padding-bottom: 20px; /*下边距*/
padding-right: 20px; /*右边距*/
padding-left: 20px; /*左边距*/
display /*元素显示方式*/
display: none; /*不显示，隐藏*/
display: block; /*将内联标签变为块级标签，具有占一整行的特性，块级标签的特性是：占一整行，可以设置宽度和高度*/
display: inline; /*将块级标签变为内联标签，变为自己有多少就占多少，内联标签的特性是：自己有多少占多少，设置宽度和高度无效*/
display: inline-block; /*让标签变为有多少占多少，但是可以设置宽度和高度，及内联标签和块级标签的特性为一体*/
cursor /*自定义光标图形*/
cursor: pointer; /*小手图标*/
cursor: help; /*帮助图标，鼠标图形带一个问号*/
cursor: wait; /*一直转的图标*/
cursor: move; /*移动的图标*/
cursor: crosshair; /*十字架的图标*/
float /*让标签浮动起来,脱离父标签*/
float: left; /*左浮动*/
float: right; /*右浮动*/
clear:both /*这个属性需要配合float来使用,当子标签漂浮起来之后,父标签就不会被撑起,在父标签内部的末尾标签添加该属性可以将漂浮起来的子标签拽回来,将父标签填充满，例如：*/
<div style="width: 500px; border: 1px solid red;">
<div style="width: 20%; background-color: aqua; float: left">f</div> ① 当子标签浮动起来之后，就会脱离父标签
<div style="width: 30%; background-color: hotpink; float: left">a</div>
<div style="clear: both"></div> ② 通过在父标签内部的末尾添加一行该代码可以将子标签拽回来，给父标签进行填充
</div>
position /*定位*/
position: fixed; /*绝对定位，固定在窗口的某个位置，例如返回顶部的按钮图标，拉动滚动条，返回顶部一直出现在窗口的固定位置*/
<body>
<div style="height: 1000px; background-color: #ddd;"></div>
<div style="position: fixed; right: 200px; bottom: 100px;">返回顶部</div>
</body>
position: absolute; /*绝对定位。针对页面定死，拉动浏览器右侧滚动条，该元素会消失*/
position: relative; /*相对定位，根据元素所在的位置进行移动*/
absolute + relative 例子：
<body>
<div style="height: 500px; width: 400px; border: 1px solid red; position: relative">
<div style="bottom: 0; right: 0; position: absolute">
111
</div>
</div>
</body>
z-index /*如果出现覆盖的情况，该值大的元素在最上面显示*/
css样式-伪类
- hover 被选中
- before 在什么之前操作什么
- after 在什么之后操作什么
例子：利用伪类的特性在div中的文本之前和之后添加东西
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 当鼠标放到class="c1"的标签上时,改变该标签内文本的颜色 */
.c1:hover{
color: #0000aa;
}
/* 在class="c2"标签内文本的最前面添加下面的文本 */
.c2:before{
content: "ccc";
}
/* 在class="c2"标签内文本的最后面添加下面的文本 */
.c2:after{
content: "aaa";
}
</style>
</head>
<body>
<div class="c1">aaa</div>
<div class="c2">bbb</div>
</body>
</html>
效果图
例子：利用伪类清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left{
float: left;
}
.clearfix:after{
content: '.'; /*在元素中添加文本.,用来使背景显示出来*/
clear: both; /*在左右两侧均不允许浮动元素*/
display: block;
visibility: hidden; /*设置元素不可见,但是所占位置还在*/
height: 0;
}
</style>
</head>
<body>
<div class="clearfix" style="background-color: red">
<div class="left" style="height: 100px; background-color: green;">1</div>
<div class="left">2</div>
</div>
</body>
</html>
效果图
使用css作出的效果图
利用css样式做出上下左右三角形
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.icon-down{
display: inline-block;
border-right: solid 5px transparent;
border-left: solid 5px transparent;
border-top: solid 5px red;
border-bottom: solid 5px transparent;
}
.icon-up{
display: inline-block;
border-right: solid 5px transparent;
border-left: solid 5px transparent;
border-top: solid 5px transparent;
border-bottom: solid 5px red;
}
.icon-left{
display: inline-block;
border-right: solid 5px red;
border-left: solid 5px transparent;
border-top: solid 5px transparent;
border-bottom: solid 5px transparent;
}
.icon-right{
display: inline-block;
border-right: solid 5px transparent;
border-left: solid 5px red;
border-top: solid 5px transparent;
border-bottom: solid 5px transparent;
}
</style>
</head>
<body>
<!--向下三角-->
<div class="icon-down"></div>
<!--向上三角-->
<div class="icon-up"></div>
<!--向左三角-->
<div class="icon-left"></div>
<!--向右三角-->
<div class="icon-right"></div>
</body>
</html>
- 效果图
后台界面框架
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.pg-header{
height: 70px; /*高度70像素*/
border: solid red 1px; /*1像素的红色实线边框*/
}
.pg-body .body-menu{
border: solid red 1px; /*1像素的红色实线边框*/
width: 200px; /*宽200像素*/
position: absolute; /*绝对定位,针对页面定位*/
top: 80px; /*距离顶部80像素*/
left: 0; /*靠左*/
bottom: 0; /*靠下*/
}
.pg-body .body-content{
height: 2000px; /*高度2000像素*/
border: solid red 1px; /*1像素的红色实线边框*/
position: absolute; /*绝对定位,针对页面定位*/
top: 80px; /*距离顶部80像素*/
left: 210px; /*距离左边210像素*/
right: 0; /*靠右*/
bottom: 0; /*靠下*/
overflow: auto; /*当元素内容超过元素设置的高度时,就出现滚动条*/
}
</style>
</head>
<body>
<!-- 顶部横条部分 -->
<div class="pg-header"></div>
<!-- 中间内容部分 -->
<div class="pg-body">
<!-- 左侧菜单栏部分 -->
<div class="body-menu"></div>
<!-- 右侧内容部分 -->
<div class="body-content">
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
- 效果图
web前端之 CSS的更多相关文章
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- 1+x 证书 Web 前端开发 css 专项练习
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- web前端开发CSS命名规范参考
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...
- web@前端--html,css,javascript简介、第一个页面(常用标签简介)
1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...
- Web前端开发CSS规范总结
作为Web前端开发必备语言,CSS为大家广为熟知,今天就跟大家分享下CSS规范总结,Web前端的小伙伴们看过来吧! CSS样式的权值(权重) 权值等级的定义 第一等:代表内联样式,如: style=” ...
随机推荐
- Web Service工作原理
Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的 ...
- [置顶] 强制访问控制内核模块Smack
Smack(Simplified Mandatory Access Control Kernel)是Casey Schaufler[15]于2007年在LSM基础上实现的Linux强制访问控制安全模块 ...
- 压位加速-poj-2443-Set Operation
题目链接: http://poj.org/problem?id=2443 题目意思: 有n个集合(n<=1000),每个集合有m个数ai(m<=10000,1=<ai<=100 ...
- poj 3009 Curling 2.0 （dfs ）
Curling 2.0 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11879 Accepted: 5028 Desc ...
- (转)sql中 in 、not in 、exists、not exists 用法和差别
exists (sql 返回结果集为真) not exists (sql 不返回结果集为真) 如下: 表A ID NAME 1 A1 2 A2 3 A3 表B ID AI ...
- arc engine - ILayer.
ILayer ILayer接口是被图层(Layer)对象实现的,图层对象是用来在地图中显示空间信息. 注意,图层不含有空间数据,它只是获取数据的一个引用层而已.图层对象是一个抽象对象,它定 ...
- iOS图片设置圆角
一般我们在iOS开发的过程中设置圆角都是如下这样设置的. imageView.clipsToBounds = YES; [imageView.layer setCornerRadius:]; 这样设置 ...
- 《那些事之Log4j》什么是log4j？【专题一】
Log4j 简介 在应用程序中添加日志记录总的来说基于三个目的: 监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计分析工作: 跟踪代码运行时轨迹,作为日后审计的依据: 担当集成开发环境 ...
- hdu 1009 贪心基础题
B - 贪心 基础 Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:32768KB 64bi ...
- 洛谷 P1830 轰炸Ⅲ
P1830 轰炸Ⅲ 题目提供者wanglichao1121 标签模拟矩阵洛谷原创 难度普及/提高- 题目背景 一个大小为N*M的城市遭到了X次轰炸,每次都炸了一个每条边都与边界平行的矩形. 题目描述 ...