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 ...
随机推荐
- 【数据结构】10分钟教你用栈求解迷宫老鼠问题超详细教程附C++源代码
问题描述 给定一张迷宫地图和一个迷宫入口,然后进入迷宫探索找到一个出口.如下图所示: 该图是一个矩形区域,有一个入口和出口.迷宫内部包含不能穿越的墙壁或者障碍物.这些障碍物沿着行和列放置,与迷宫的边界 ...
- leetcode-788-Rotated Digits（使用vector替代if else的逐个判断）
题目描述: X is a good number if after rotating each digit individually by 180 degrees, we get a valid nu ...
- js 鼠标拖拽效果实现
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Mockplus原型设计工具介绍
一．原型设计工具简介 Mockplus (摹客) 一种快速原型设计工具 官网提供四个平台的下载,通用性很广. 二．原型设计的模板 Mockplus可以为设计者提供以下几种模板 其中在“手机”模板里, ...
- IntelliJ IDEA 版本控制(svn、git) 修改文件后，所属目录的颜色也变化
IntelliJ IDEA 的版本控制默认文件修改了,所属目录的颜色是不会变化,这很不方便.如: 修改方法如下: File --> settings --> version control ...
- python lambda匿名函数 用法
语法 lambda argument_list: expression argument_list是参数列表 expression是一个关于参数的表达式.表达式中出现的参数需要在argument_li ...
- python之小记with open...as..上下文管理器
之前在学习file文件对象是说过,open文件操作结束后要关闭文件,否则会一直占用资源.但是当出现异常,如读取过程中文件不存在或异常,则直接出现错误,close方法无法执行,文件无法关闭 with o ...
- js高级程序设计 笔记 --- 面向对象的程序设计
1,理解对象 通过对象字面量的方式,创建一个对象,为它添加属性和方法: var obj = { a: 1, b:2, sayA(){ console.log(this.a)}} 1,属性类型: 数据属 ...
- ios真机测试问题
前端页面在ios端真机测试出现的问题 由于苹果对于性能的要求是近乎苛刻,如果没有可点的特性的元素系统默认不会给它响应事件,因此真机测试时容易添加不上绑定事件 解决办法: 1.通过js判断当前是否为苹果 ...
- git笔记记录
廖雪峰Git教程学习记录. 0.常用命令总结: pwd 命令用于显示当前目录 git init 命令把这个目录(自己建的文件夹)变成Git可以管理的仓库(必须切换到当前文件夹下面执行这个命令) ls ...