html和css入门 （四）
背景样式
背景颜色
| 属性名 | background-color |
|---|---|
| 属性值 | 合法的颜色的名，比如：red；十六进制值，比如：#ff0000；RGB 值，比如：rgb(255,0,0) |
| 默认值 | transparent |
| 描述 | 设置背景颜色。 |
示例如下：
.box {
/* 下面 3 种写法是等价的 */
background-color: red;
background-color: rgb(255, 0, 0);
background-color: #ff0000;
}
背景图片
| 属性名 | background-image |
|---|---|
| 属性值 | 图片所在路径 |
| 默认值 | none |
| 描述 | 设置背景图片。 |
示例如下：
.box {
background-image: url("./cat.jpg");
}
图片重复方式
| 属性名 | background-repeat |
|---|---|
| 属性值 | repeat | repeat-x | repeat-y | no-repeat |
| 默认值 | repeat |
| 描述 | 设置背景图片。 |
示例如下：
.box {
/* repeat 默认值，默认情况下，在水平和垂直方向上都重复*/
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
}
图片位置
| 属性名 | background-position |
|---|---|
| 属性值 | 长度 | 百分比 | 表示方位的单词 |
| 默认值 | 0% 0% |
| 描述 | 背景图片的位置 |
示例如下：
/*
水平：left center right
垂直：top center bottom
*/ .box {
background-position: 40px 40px;
background-position: 20% 20%;
background-position: right bottom;
}
图片附着
| 属性名 | background-attachment |
|---|---|
| 属性值 | scroll | fixed |
| 默认值 | scroll |
| 描述 | 设置背景图片是否随内容滚动 |
示例如下：
.box {
/* 背景图随着页面内容滚动 */
background-attachment: scroll;
/* 背景图不会随着页面内容滚动 */
background-attachment: fixed;
}
简写属性
| 属性名 | background |
|---|---|
| 属性值 | color image position repeat attachment |
| 默认值 | 每个属性的默认值 |
| 描述 | 设置背景图片是否随内容滚动 |
示例如下：
.box {
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
伪类选择器
:link：选择未被点击过的链接。:visited：选择被点击过之后的链接。:hover：选择鼠标悬停在其上的元素。:active：选择正在被点击的元素（点着不放）。
高级选择器
后代选择器
后代选择器用于指定目标选择器必须处于某个选择器对应的元素内部。其语法格式如下：
<!—使用后代选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器测试</title>
<style>
div{
width:300px;
height:60px;
background-color:#ddd;
}
div .a{
background-color: green;
border:1px solid red;
}
</style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div>
<div class=”a”>处于div之内，且class属性为a的元素</div>
</div>
<div class=”a”>没有处于div之内，且class属性为a的元素</div>
</body>
</html>
代码中的div .a选择器定义的CSS样式，应该对处于
直接后代选择器
子选择器用于指定目标选择器必须是某个选择器对应的元素的子元素。自选择器的语法格式如下：
子选择器与后代选择器有点相似，它们之间存在如下区别：对于后代选择器，只要目标选择器位于外部选择器对应的元素内部，即使是其“孙子元素”也可；对于子选择器，要求目标选择器必须是外部选择器对应的元素的直接子元素才行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器测试</title>
<style>
div{
width:300px;
height:60px;
background-color:#ddd;
}
div .a{
background-color: green;
border:1px solid red;
}
</style>
</head>
<body> <div>
<a href=”http://www.baidu.com”>百度一下</a>
<p class=”a”> div 直接子元素</p>
<p>
<a class=”a”>，且class属性为a的元素</a>
</p>
</div> </body>
</html>
并列选择器
有些时候，我们需要让一份CSS样式对多个选择器起作用，那就可以利用并列选择器来实现了。并列选择器的语法格式如下：
对于并列选择器而言，｛｝中定义的CSS样式将会对前面列出的所有选择器匹配的元素起作用。例如下面的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并列选择器</title>
<style>
div,.a,#abc{
width:200px;
height:40px;
background-color: #888;
border:2px dotted green;
}
</style>
</head>
<body>
<div>没有任何属性的div元素</div>
<p class=”a”> class属性为a的元素</p>
<h3 id=”abc”> id为abc的元素</h3>
</body>
</html>
上面定义的样式对div元素、class属性为a的元素、id为abc的元素都起作用。
元素盒子有两部分是可见的：内容和边框。内边距是内容和边框之间的空间，外边距是边框和页面上其他元素之间的空间。
边框
| 属性名 | 描述 |
|---|---|
| border-width | 设置边框的宽度 |
| border-style | 设置边框的类型 |
| border-color | 设置边框的颜色 |
| border | 属性简写 |
border-style属性的值：
none没有边框dashed短线式边框dotted圆点线式边框double双线式边框groove槽线式边框inset有内嵌效果的边框outset有外凸效果的边框ridge脊线边框solid实线边框
div {
width: 250px;
height: 50px;
background-color: #dbdbdb;
margin-bottom: 10px;
color: red;
line-height: 50px;
text-align: center;
font-weight: bold;
}
.none {
border: none;
}
.dashed {
border: 10px dashed gray;
}
.dotted {
border: 10px dotted gray;
}
.double {
border: 10px double gray;
}
.groove {
border: 10px groove gray;
}
.inset {
border: 10px inset gray;
}
.outset {
border: 10px outset gray;
}
.ridge {
border: 10px ridge gray;
}
.solid {
border: 10px solid gray;
}
<div class="none">none没有边框</div>
<div class="dashed">dashed短线式边框</div>
<div class="dotted">dotted圆点线式边框</div>
<div class="double">double双线式边框</div>
<div class="groove">groove槽线式边框</div>
<div class="inset">inset有内嵌效果的边框</div>
<div class="outset">outset有外凸效果的边框</div>
<div class="ridge">ridge脊线边框</div>
<div class="solid">solid实线边框</div>
内边距
内边距会在元素内容和边框之间添加空白。我们可以为元素的每个边界单独设置内边距，也可以使用padding简写属性，在一条声明中设置所有的值。
| 属性 | 说明 | 值 |
|---|---|---|
padding-top |
设置顶部的内边距 | 长度值或百分数 |
padding-right |
设置右边的内边距 | 长度值或百分数 |
padding-bottom |
设置底部的内边距 | 长度值或百分数 |
padding-left |
设置左边的内边距 | 长度值或百分数 |
padding |
简写属性 | 同上，顺序为：top right bottom left |
外边距
外边距是元素边框和页面上围绕在它周围的所有东西之间的空白区域。围绕在它周围的东西包括其他元素和它的父元素。
| 属性 | 说明 | 值 |
|---|---|---|
margin-top |
设置顶部的外边距 | 长度值或百分数 |
margin-right |
设置右边的外边距 | 长度值或百分数 |
margin-bottom |
设置底部的外边距 | 长度值或百分数 |
margin-left |
设置左边的外边距 | 长度值或百分数 |
margin |
简写属性 |
跟内边距属性相似，使用百分数值设置外边距时，百分数总是跟包含块的宽度相关。
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
下面三种基本情形会出现外边距合并：
- 相邻兄弟元素
相邻的两个兄弟元素的之间的外边距会合并。如：
<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>
<p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>
可以发现这两个段落中间的距离，不是“上面段落的下边距”与“下面段落的上边距”的和 ，而是两者中的较大者（在此示例中为30px）。
+块级父元素与其第一个或最后一个子元素
此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
- 空块元素
如果存在一个空的块级元素，其 border、padding、content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例如：
<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p> <div style="margin-top: 20px; margin-bottom: 20px;"></div> <p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。
如两个兄弟元素，上面的元素的下边距为 20px ，下面的元素的上边距为 -20px ，那么发生外边距合并后，这两个元素的实际距离将变成 0px 。
处理溢出的内容
如果放置内容的元素尺寸太小的话，浏览器默认的处理方式是内容溢出，溢出的内容会被显示。如下例所示：
<!-- 创建一个无法完全显示其中内容的小尺寸元素 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<style>
p{
border:1px solid blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p>悟空和唐僧一起上某卫视非诚勿扰,悟空上台,24盏灯全灭。理由:1.没房没车只有一根破棍. 2.保镖职业危险.3.动不动打妖精,对女生不温柔. 4.坐过牢,曾被压五指山下500年。唐僧上台，哗!灯全亮。 理由:1.公务员； 2.皇上兄弟，后台最硬 3.精通梵文等外语 4.长得帅 5.最关键一点：有宝马！</p>
</body>
</html>
我们可以使用overflow属性改变这种行为，下表列出了相关的overflow属性及值。
属性名：
overflow-x设置水平方向的溢出方式overflow-y设置垂直方向的溢出方式overflow简写属性，只能设置一个属性，当水平方向和垂直方向上设置的值相同时，可以使用该属性。
属性值：
visible：默认值。内容不会被修剪，会呈现在元素框之外。hidden：内容会被修剪，溢出部分是不可见的scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto：由浏览器决定如何显示。如果内容太多就显示滚动条，否则就不显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制内容溢出</title>
<style>
p{
border:1px solid blue;
width: 100px;
height: 100px;
}
#first{
overflow:hidden;
}
#second{
overflow:scroll;
}
</style>
</head>
<body>
<p id=”first”>小明过生日，妈妈对小明说：儿子吹蜡烛，许个愿吧！吹完蜡烛后，妈妈问小明：许的什么愿啊？小明特无奈的说：我希望下个生日，蜡烛下面能有个蛋糕。</p>
<p id=”second”>小明过生日，妈妈对小明说：儿子吹蜡烛，许个愿吧！吹完蜡烛后，妈妈问小明：许的什么愿啊？小明特无奈的说：我希望下个生日，蜡烛下面能有个蛋糕。</p>
</body>
</html>
改变元素的盒类型
display属性提供了一种改变元素盒类型的方式，给元素应用display属性后会改变元素在页面上的显示方式。下表列出了一些display属性常用的属性值。
| 值 | 说明 |
|---|---|
inline |
元素会被显示成行内元素 |
block |
此元素将显示成块级元素 |
inline-block |
元素会被显示成行内的块级元素 |
none |
元素既不显示，也不占据文档空间 |
块级元素
将display属性设置为block值会创建一个块级元素。块级元素独占一行，不允许其他元素与其同在一行。常见的块级元素有div、p等。
行内元素
将display属性设置为inline使会创建一个行内元素，行内元素会显示在同一行，不会独占一行。常见的行内元素有a、span等。
使用inline值的时候，浏览器会忽略某些属性，比如：
width、height、margin。行内块级元素
将display属性设置为inline-block就会创建一个同时具有行内和块级元素特征的元素。盒子整体上作为行内元素显示，也就是说会跟其他行内元素显示在同一行，但盒子内部作为块级元素显示，这样，
width、height和margin属性都会应用到盒子上。隐藏元素
将
display属性设置为none值就是告诉浏览器不要为元素创建任何类型的盒子，这时元素在页面中不显示，也不占据任何空间。
浮动
使用float属性可以创建浮动的盒子，浮动盒会将元素的左边界或者右边界移动到包含块或另一个浮动盒的边界。
属性名：
float 设置元素的浮动样式
属性值：
left 移动元素，使其左边界挨着包含块的左边界或另一个浮动元素的右边界 right 移动元素，使其右边界挨着包含块的右边界或另一个浮动元素的左边界 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
清除浮动
如果设置了多个浮动元素，默认情况下，它们会一个挨着一个地堆叠在一起。使用clear属性可以阻止出现这种情况。clear属性可以阻止出现这种情况。clear属性可以指定浮动元素的一个边界或者两个边界不能挨着另一个浮动元素。
属性名： clear 设置元素的左边界、右边界或左右两个边界不允许出现浮动元素
属性值：
left 元素的左边界不能挨着另一个浮动元素 right 元素的右边界不能挨着另一个浮动元素 both 元素的左右边界都不能挨着浮动元素 none 默认值。允许浮动元素出现在两侧
特别声明：本人也是小白，想让与我一样的初学者一起学习，写的不好的地方请见谅
html和css入门 （四）的更多相关文章
- 第六十九节，css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- 脑残式网络编程入门(四)：快速理解HTTP/2的服务器推送(Server Push)
本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...
- 【Python全栈-CSS】CSS入门
CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...
- day 31 html(二) 和css入门
前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...
- Python爬虫入门四之Urllib库的高级用法
1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Headers 的属性. 首先,打开我们的浏览 ...
- H5教程（二），CSS入门（一）选择器
这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1. CSS简介 1.1 CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...
- 【干货】Html与CSS入门学习笔记4-8
四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...
- 转 Python爬虫入门四之Urllib库的高级用法
静觅 » Python爬虫入门四之Urllib库的高级用法 1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我 ...
- HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片
一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...
随机推荐
- CH5101 LCIS
CH5101 LCIS 题意: 求两个长度不超过3000的序列的最长公共上升子序列 思路: 朴素解法:用f[i,j]表示a1~ai与b1~bj可以构成的以bj为结尾的LCIS的长度,三重循环求解: ; ...
- ubuntu->错误
1.dpkg *** locked 原因:安装某个包不成功, 可以使用命令 dpkg --configure -a 来重启中断的安装过程 如果屡次安装不成功放弃安装,则删除 lock 2.flashp ...
- NSScanner 扫描字符串
两个常用于扫描字符串的方法 //'指针'只移动一个位置,判断当前所指的字符是否是目标字符@"x", 若是则存入result中,返回YES,否则NO BOOL res = [scan ...
- js高级程序设计 笔记 --- DOM
DOM是针对HTML和XML文档的一个API.DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 1,节点层次 DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的 ...
- Linux 高级安全SELinux的关闭
Linux有一个高级安全组件,如果开启会输出打了的日志文件messages.如下: 导致/var/log/messages 达到11g root@cpp11 ~]# df -l文件系统 ...
- Linux and Shell 实用命令
-name '*.jar' -printf '%p:' ### 查看CPU使用率 mpstat -P ALL
- python量化分析系列之---5行代码实现1秒内获取一次所有股票的实时分笔数据
python量化分析系列之---5行代码实现1秒内获取一次所有股票的实时分笔数据 最近工作太忙了,有一个星期没有更新文章了,本来这一期打算分享一些对龙虎榜数据的分析结果的,现在还没有把数据内的价值很好 ...
- TreeSet和TreeMap不能存放重复元素？能不能存放null?
问题一:本来认为TreeMap不能存放重复元素?其实并非如此: 其实一般情况下是不允许存放重复元素的,但是它并非这么死板,在一些情况下是可以存放重复元素的,存了又会有引入其他问题. 问题二:能不能存放 ...
- CentOS7 MongoDB安装及基本配置
一.安装包的获取 1.创建文件: vi /etc/yum.repos.d/mongodb-org-4.0.repo 2.在上一步创建的文件中,写入如下内容: [mongodb-org-4.0] nam ...
- Linux工具安装配置之Oracle
对于Oracle的安装真的是心生恐惧,特别是一堆堆的依赖包.趁这次DBA在南京,实际操作一番. 两种方式,1.全新安装:2.硬拷贝 全新安装,参考下面这个介绍 http://www.cnblogs.c ...