集腋成裘-03-css基础-02
1.1 三种写法
内嵌式:样式只作用于当前文件,没有真正实现结构表现分离
外链式:作用范围是当前站点,真正实现了内容与表现分离
行内样式:仅限于当前标签,结构混在一起
1.2 标签分类
1.2.1 块元素
代表标签:Div;p;ul;li
特点:独占一行;可设置宽高;子元素的宽高默认为父元素的宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width:200px;
height:200px;
background-color: blue
}
p{
background-color: red;
}
</style>
</head>
<body>
<div>
div元素是块元素
<p>p元素的默认宽高等于父级的宽度</p>
</div>
<p>p元素也是默认浏览器宽度</p>
</body>
</html>
块元素
1.2.2 行内样式
代表标签:span;a;strong;
特点:一行显示;不可设置宽高;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
width:200px;
height:200px;
background-color: blue
}
a{
width:200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<span>
我是span标签中的元素<a href="#">a标签</a>
</span> <span>
不能设置宽高
</span>
<a href="#">
不能设置宽高
</a>
</body>
</html>
行内元素
1.2.3 行内块
代表标签:input;img;
特点:一行显示;可设置宽高;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input{
width:200px;
height:200px;
background-color: blue
}
img{
width:200px;
height:200px;
background-color: red;
vertical-align: top;
}
</style>
</head>
<body>
<input type="text" name="" value="我是input标签中的元素"> </span> <img src="1.png" alt="">
</body>
</html>
行内块
1.3 互相转换
1.3.1 块=>行内
display:inline;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width:200px;
height:200px;
background-color: blue; }
p{
background-color: red;
display:inline;
}
</style>
</head>
<body>
<div>
div元素是块元素
<p>p元素的默认宽高等于父级的宽度</p>
</div>
<p>p元素也是默认浏览器宽度</p>
</body>
</html>
块转化为行内
1.3.2 行内=>块
display: block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
width:200px;
height:200px;
background-color: blue;
display: block;
}
a{
width:200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<span>
我是span标签中的元素<a href="#">a标签</a>
</span> <span>
不能设置宽高
</span>
<a href="#">
不能设置宽高
</a>
</body>
</html>
行内转化为块
1.3.3 =>行内块
display:inline-block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width:400px;
height:400px;
background-color: blue; }
p{
width:200px;
height:200px;
background-color: red;
display:inline-block;
}
</style>
</head>
<body>
<div>
div元素是块元素
<p>p元素的默认宽高等于父级的宽度</p>
</div>
<p>p元素也是默认浏览器宽度</p>
</body>
</html>
块转化为行内块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
width:400px;
height:400px;
background-color: blue;
display:inline-block;
}
a{
width:200px;
height:200px;
background-color: red;
display:inline-block;
}
</style>
</head>
<body>
<span>
我是span标签中的元素<a href="#">a标签</a>
</span> <span>
不能设置宽高
</span>
<a href="#">
不能设置宽高
</a>
</body>
</html>
行内转化为行内块
1.4 样式表的属性
1.4.1 层叠性 :当元素之间的样式发生冲突时,按照浏览器的解析顺序,后续的样式会覆盖掉原有的样式.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> .div1{
color:red;
}
.div2{
color:blue;
}
</style>
</head>
<body>
<div class="div1 div2">
我是div中元素
</div>
</body>
</html>
层叠性
1.4.2 继承性:包含关系,子元素中的某些元素会继承父元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{ font-style: italic; }
div{
font:italic 16px/40px 微软雅黑 ;
color:red; }
</style>
</head>
<body>
<div>
我是另一个div中元素
<p>我是div中的p标签我是红色</p>
</div>
</body>
</html>
继承性
1.4.3 优先级
默认(继承)<标签<类<id<行内<!important
0 < 10<100<1000<1000+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#p2{
color:green;
}
#p{
color:pink;
}
.p{
color:orange;
}
p{
color:blue;
}
div{
color: red;
}
.p2{
color:orange !important;
}
</style>
</head>
<body>
<div >
我默认是黑色;
<p>我是默认是继承div的黑色</p>
<p>标签权重大于继承</p>
<p class="p">类的权重大于标签</p>
<p class="p" id="p">id权重大于类</p>
<p class="p" id="p2" style="color:yellow">行内权重大于id</p>
</div>
<div class="father">
<p class="p2">最厉害得是!important</p>
</div>
</body>
</html>
优先级
权重的叠加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> .father,.p2{
color:red;
}
div,.p{
color:orange;
} </style>
</head>
<body> <div class="father">
<p class="p2">红色表示连个类的叠加</p>
</div>
</body>
</html>
权重的叠加
1.5 链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a:link{
color:red;
text-decoration: none;
}
/*访问之后的状态*/
a:visited{
color:yellow;
}
/*鼠标放上的状态*/
a:hover{
color:orange;
}
/*激活状态*/
a:active{
color:pink;
}
</style>
</head>
<body>
<div class="content">
<a href="#">链接</a>
</div>
</body>
</html>
链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.nav{
height: 60px;
background-color: #aaa;
text-align: center;
}
a:link{
color:red;
text-decoration: none;
}
/*访问之后的状态*/
a:visited{
color:yellow;
}
/*鼠标放上的状态*/
a:hover{
background-color: #eee;
color: #F14400;
}
/*激活状态*/
a:active{
color:pink;
}
a{
display: inline-block;
width:100px;
height: 60px;
}
a.public{
font-weight: ;
color: #F14400;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="public">天猫</a>
<a href="#" class="public">聚划算</a>
<a href="#" class="public">超市</a>
<a href="#" class="public">头条</a>
<a href="#">阿里旅行</a>
<a href="#">电器城</a>
<a href="#">淘抢购</a>
<a href="#">苏宁易购</a>
<a href="#">智能生活</a>
</div>
</body>
</html>
小练习
1.6 背景属性
/*背景颜色*/
background-color:red;
/*背景图片*/
background-image:url("");
/*背景平铺*/
background-repeat:repeat | no-repeat | repeat-x | repeat-y;
/*背景定位*/
background-position: left | right | center | top | bottom
/*背景滚动*/
Background -attachment scroll | fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
height:500px;
/*背景颜色*/
background-color:red;
/*背景图片*/
background-image:url("1.png");
/*背景平铺*/
background-repeat:no-repeat;
/*背景定位*/
background-position:center;
/*背景滚动*/
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box"> </div> <div Style="height:1000px;background-color:blue"> </div>
</body>
</html>
背景颜色
1.6.2 背景属性的连写
background: red url("1.png") no-repeat center scroll;
1.6.3 练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input{
width:200px;
height: 20px;
background: url("search.png") no-repeat right center;
}
</style>
</head>
<body>
<input type="text" value="请输入关键字">
</body>
</html>
练习1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li{ list-style: none;
background: url("li.gif") no-repeat left center;
text-indent: 1em;
} </style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">阿里旅行</a></li>
<li><a href="#">电器城</a></li>
<li><a href="#">淘抢购</a></li>
<li><a href="#">苏宁易购</a></li>
<li><a href="#">智能生活</a></li>
</ul> </div>
</body>
</html>
练习2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
display: inline-block;
width: 67px;
height: 32px;
background: url("shoppingCar.png");
}
a:hover{
background: url("shoppingCar.png") bottom;
} </style>
</head>
<body>
<div class="nav">
<a href="#"></a>
</div>
</body>
</html>
练习3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
display: inline-block;
width: 120px;
height: 58px;
text-align: center;
text-decoration: none;
color:white;
line-height: 50px;
}
.one{
background: url("images/bg1.png");
}
.one:hover{
background: url("images/bg5.png");
}
.two{
background: url("images/bg2.png");
}
.three{
background: url("images/bg3.png");
}
.four{
background: url("images/bg4.png");
} </style>
</head>
<body>
<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航</a>
<a href="#" class="four">五彩导航</a>
</body>
</html>
练习3
集腋成裘-03-css基础-02的更多相关文章
- CSS基础(02)
CSS 选择器 1.CSS3 选择器简介 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 语法: 下面中"CSS" 列指示该属性是在哪个 CSS 版本中定义的.(C ...
- css基础02
熟练快捷键!方便,要多练! css复合选择器 不会选孙子,有一个儿子和另一个儿子的孩子(也是孙子)同名了,但子选择器子选择儿子,同名的孙子不选.和后代选择器有一点不一样的. " ,&quo ...
- 086 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 03 面向对象基础总结 01 面向对象基础（类和对象）总结
086 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 03 面向对象基础总结 01 面向对象基础(类和对象)总结 本文知识点:面向对象基础(类和对象)总结 说明 ...
- 084 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 03 构造方法-this关键字
084 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 03 构造方法-this关键字 本文知识点:构造方法-this关键字 说明:因为时间紧 ...
- 022 01 Android 零基础入门 01 Java基础语法 03 Java运算符 02 算术运算符
022 01 Android 零基础入门 01 Java基础语法 03 Java运算符 02 算术运算符 本文知识点:Java中的算术运算符 算术运算符介绍 算术运算符代码示例 注意字符串连接问题和整 ...
- css基础--常用css属性02
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...
- 2020年12月-第02阶段-前端基础-CSS基础选择器
CSS选择器(重点) 理解 能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的 ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- web开发：css基础
一.w3c架构分析 二.css三种引入 三.三种引入的优先级 四.基础选择器 五.长度单位与颜色 六.文件样式操作 七.display 一.w3c架构分析 <!DOCTYPE html> ...
- CSS基础知识筑基
01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...
随机推荐
- ActiveMQ 动态网络链接
ActiveMQ的broker-broker方式有两种,一种 静态连接一种是动态连接,一般使用静态连接,动态连接了解就好,没有过多的去测试. 1. 多播协议multicast ActiveMQ使用Mu ...
- SpringTask定时任务的使用
实现定时任务简单的有四种方式:Timer\ScheduledThreadPool线程池\quartz(常用),还有另一种就是springtask. 都说springtask上手简单,于是简单的研究一下 ...
- Linux内存分配小结--malloc、brk、mmap【转】
转自:https://blog.csdn.net/gfgdsg/article/details/42709943 http://blog.163.com/xychenbaihu@yeah/blog/s ...
- c++学习day3（字符串_指针）
1.字符串 1)三种形式 用双引号括起来的字符串常量:结尾会有一个'\0'字符,但该字符只占据字节数,不会使字符串长度增加. 存放于字符数组中,以'\0'字符结尾:数组元素个数应至少为字符串长度+1 ...
- python去除字符串里的非数字
filter(lambda ch: ch in ‘0123456789.’, crazystring)
- 利用 ffmpeg 的 maskedmerge 滤镜, 从视频中提取移动对象
ffmpeg \ -i background.png \ -i video.mkv \ -filter_complex \ " color=#00ff00:size=1280x720 [ma ...
- vue2.x + vux采坑总结（一）
1.<tab-bar> 切换时,iocn高亮跟着切换问题 vux的Tabbar组件是用来实现底部tab栏,详情见官网文档 , 实现实例截图: 代码如下,控制高亮的是代码凸显部分:selec ...
- php7静态方法的链式调用
2018-1-11 20:25:48 星期四 情景: 以前想要链式调用必须先 new 一个对象, 然后 $obj->aa()->bb()... 现在PHP7 (php7.0.13 php ...
- object oriented programming : class application
class Thread_Sync; class Critical; class Info; class Info{Info(std::string str):m_info(str){} privat ...
- 洛谷P4859 已经没有什么好害怕的了 [DP，容斥]
传送门 思路 大佬都说这是套路题--嘤嘤嘤我又被吊打了\(Q\omega Q\) 显然,这题是要\(DP\)的. 首先思考一下性质: 为了方便,下面令\(k=\frac{n+k}{2}\),即有恰好\ ...