HTML+CSS教程（五）外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出
一.外联样式
通过link标签引入外部css文件夹中的xxx.css文件到head标签中
例:
二.
1.组选择器
选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值}
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.div1,.div2,.div3,p,h1,h2{
width: 200px;
height: 100px;
}
.div1,.div2,.div3{
background: green;
}
p,h1,h2{
background: red;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<!--组合选择器-->
<!--设置该html文档流中所有的标签 宽高一样,背景颜色不一样-->
<div class="div2">div2</div>
<div class="div3">div3</div>
<p class="p1">p元素</p>
<h1>标题1</h1>
<h2>标题2</h2>
<!--这个div和以上的所有div宽高不一样-->
<div></div>
</body>
</html>
2.伪类/伪元素选择器
a::伪类提高浏览器的兼容性
a:link 设置超链接未被访问时的页面显示
a:visited 设置超链接已被访问过时的页面显示
a:hover 设置鼠标悬停在超链接时的页面显示
a:active 设置点击时的超链接页面显示
注意:它们四个书写的顺序很重要(link和visited必须写到hover之前,active必须位于hover之后.)
3.返回顶部案例:通过name命名,超链接绑定
例:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
text-decoration: none; //去掉下划线//
font-family: 阿美简体;
font-size: 24px;
color: black;
}
//a::伪类:提高浏览器的兼容性//
a:link{ //设置超链接未被访问时的页面显示//
color: red;
}
a:visited{ //设置超链接已被访问过时的页面显示//
color: green;
}
a:hover{ //设置鼠标悬停在超链接时的页面显示//
color: deeppink;
}
a:active{ //设置点击时的超链接页面显示//
color: gold;
}
input:focus{
background: red;
}
body:hover{
background: grey;
}
div{
width: 200px;
height: 200px;
background: green;
}
div:hover{
width: 100px;
height: 100px;
background: url(img/bg2.jpg);
background-repeat: no-repeat; //去掉图片的重复性//
background-size: 100% 100%;
}
</style>
</head>
<body>
<div></div>
<input type="text" />
<a href="#" name="mya">我的超链接</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#mya">返回顶部</a>
</body>
4.圆角显示边框
border:none 无边框
//border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;//
简写://border-radius: 50%;//
边框的阴影:box-shadow: 20px 10px 60px 15px gray;(水平,垂直,模糊程度 ,阴影大小,颜色)
5.css三种样式的优先级
默认:行内>内嵌>外联
css三种样式的权重/改变优先级:!important
6.伪类选择的元素:nth-chid()
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
list-style: none;
float: left;
border: 1px solid aqua;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
div{
width: 450px;
height: 400px;
margin: 100px auto;
}
li:nth-child(7n){
background: red;
}
li:nth-child(6n){
background: green;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
</ul>
</div>
</body>
</html>
效果:
7.盒子模型
(1)重要的组成元素:
content(内容),padding(内边距),border(边框),margin(外边距)
(2)margin
margin:100px auto;(100px 表示的是上下的外边距 auto表示的左右水平居中)
margin:10px,20px,30px,40px;(上,右,下,左,)
margin;10px,20px,30px;(0px 表示上 20px表示左/右 30px表示下)
margin: 10px 20px;(10px表示上下 20px表示左右)
margin: 30px;(30px表示上右下左 都为这值)
(3)让元素中的内容与元素边框之间的距离增大,可以设置元素的内边距
padding: 10px 20px 30px 40px;(上10px,右20px,下30px,左40px)
padding: 10px 20px 30px;(上 , 左/右 , 下)
8.margin-top塌陷问题
产生:一个元素中含有一个子元素,给子元素添加margin-top时,会发现将设置的值添加给父元素,导致子元素设置margin-top失效
解决方法:
(1)给父元素加overflow:hidden;
(2)给父元素加border边框
(3) 伪元素
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{ width: 400px;
height: 200px;
background: red;
//会改变大小//
//padding: 30px;//
//第一种解决margin-top塌陷问题的方式//
//overflow: hidden;// //第二种方法解决margin-top塌陷问题*/
//border: 10px solid black;//
}
//最常见的一个问题(bug): margin-top塌陷问题//
//margin-top: 100px;//
.div2{margin-top: 100px;
margin-left: 30px;
}
//第三种方法//
.div1:before{
content: "";
display: table;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">我爱学习学习使我快乐</div>
</div>
</body>
</html>
9.元素溢出
产生:元素溢出指一个元素中含有其他元素,而其他元素超出了这个元素(父元素),我们把这种情况称之为元素溢出.
解决方法:
overflow:hidden;超出父元素的部分隐藏(剪切)不在可见
overflow: scroll;设置此属性,内容会被裁剪, 但是会添加滚动条,以便显示被裁剪的内容
overflow:visible;默认值,不会修剪,会呈现在元素框外
overflow-y:scroll;垂直滚动条
overflow-x:scroll;水平滚动条
overflow:auto;如果剪切了才显示滚动条
10.布局中常见的三种标签
(1)块元素/标签:块元素会占据文档流的一行显示,即便设置了宽高也会占据一行显示.
(2)内联标签/元素:内联元素的大小是跟随元素内容的改变而改变,设置了宽高,也不会改变元素的大小,同时不会占据文档流的一行,从左往右编写执行
(3)内联块标签/元素:不占据一行,且能设置宽高.
display属性:
可以将内联元素转换成内联块元素/块元素,同时也可以将内联块元素转换成内联元素/块元素,还可以将块元素转换成内联元素/内联块元素
display属性值:
none:元素影藏不显示
inline: 转换成内联元素
block:转换成块元素,并显示元素
inline-block: 转换成内联块元素
HTML+CSS教程（五）外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出的更多相关文章
- 利用CSS hover伪类改变其他元素的总结
:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...
- CSS中的背景、雪碧图、超链接的伪类样式
一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填 ...
- CSS学习笔记-03- 过渡模块之前奏篇 a标签的伪类选择器
CSS3 2D转换CSS3 3D转换CSS3 过渡CSS3 动画 CSS3 的四大金刚. 想要实现酷炫的视觉效果,上面4个是必须要掌握的.学习之前,先复习一下 视觉盛宴的前菜 :a标签的伪类选择器 铛 ...
- 前端（六）—— 伪类选择器：a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
- CSS3选择器（三）之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
- H5与CS3权威下.19 选择器（2）结构性伪类选择器
1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...
- css标签样式 边框 盒子模型 定位 溢出 z-index 透明度
目录 一.CSS设置标签样式 1. 给标签设置长和宽 2.字体的颜色(3种表示方法) 3.文本样式 4. 语义 5. 背景样式 6. 边框 6.1 边框变圆 7.display 标签转换 二.盒子模型 ...
- 【笔记】css hover 伪类控制其他元素
最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...
- css宽度+字体+颜色+边框+文本+光标+伪类选择器
常用属性: width:宽 height:高 min-width:最小宽度 :可以设置如果宽度变小了,有个滑动效果(常常在我们布局的过程中需要去设置) min-height;最小高度 max-widt ...
- CSS盒子模型元素实际宽度的计算
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容.然而 IE 5 和 6 的呈现却是不正确的.根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 ...
随机推荐
- Oracle 10g客户端的安装和配置
1.双击Oracle11g_database安装目录下的Setup.exe. 2.选择“基本安装”,设置“安装位置”,填写“数据库名”和“口令”,点击“下一步”. 3.点击“下一步”. 4.一般会出现 ...
- [HOJ2662]Pieces Assignment<状态压缩dp>
描述: 有一个n*m的棋盘(n.m≤80,n*m≤80)要在棋盘上放k(k≤20)个棋子,使得任意两个棋子不相邻(每个棋子最多和周围4个棋子相邻).求合法的方案总数. 输入: 本题有多组测试数据,每组 ...
- [vijos1304]回文数<模拟>
题目链接:https://vijos.org/p/1304 好久没写博客了,最近一直打不出题,感觉自己是废了,今天做了一道模拟水题,但还是半天没过,后来才发现是忘记考虐10以上的进制是带有字母的,然后 ...
- MATLAB——文件读写（1）
1.文件打开关闭 (1)文件打开 fid=fopen(文件名,‘打开方式’)说明:其中fid用于存储文件句柄值,如果返回的句柄值大于0,则说明文件打开成功.文件名用字符串形式,表示待打开的数据文件.常 ...
- 字典树基础进阶全掌握（Trie树、01字典树、后缀自动机、AC自动机）
字典树 概述 字典树,又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计.它 ...
- Blazor入门笔记（5）-数据绑定
1.环境 VS2019 16.5.1 .NET Core SDK 3.1.200 Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.默认绑定 ...
- O - Layout（差分约束 + spfa）
O - Layout(差分约束 + spfa) Like everyone else, cows like to stand close to their friends when queuing f ...
- JLabel有点感觉了，码上
Java中Label的姿势 Jabel与JDialog窗口的是否可见可做为弹窗. 设置字体颜色 jl.setForeground(Color.ORANGE);//设置字体颜色 设置字体与大小 jl.s ...
- Flutter AbsorbPointer 与 IgnorePointer的区别
AbsorbPointer AbsorbPointer是一种禁止用户输入的控件,比如按钮的点击.输入框的输入.ListView的滚动等,你可能说将按钮的onPressed设置为null,一样也可以实现 ...
- Visual Studio Code 1.44 解决中文代码显示乱码问题（小白图文教程）
现今主流的计算机中文字符编码方案是:GBK和UTF-8. 不同编码方案使用不同的字符集,GBK字符集在中文字符长度和字符数量上存在绝对优势,但对国外字符并不支持.所以,完全面向国内的程序/网页使用的是 ...