CSS 分组 和 嵌套 选择器

分组选择器

h1,h2,p

{

color:green;

}

嵌套选择器

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>WENG</title>

<style>

p

{

    color:blue;

    text-align:center;

}

.marked

{

    background-color:red;

}

.marked p

{

    color:white;

}

</style>

</head>

<body>

<p>这个段落是蓝色文本，居中对齐。</p>

<div class="marked">

<p>--------------这个段落不是蓝色文本。---------------</p>

</div>

<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>

</body>

</html>

尺寸 (Dimension)

尺寸属性

属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

Positioning(定位)

position 属性指定了元素的定位类型。

position 属性的四个值：

  • static
  • relative
  • fixed
  • absolute

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

p.pos_fixed

{

    position:fixed;

    top:30px;

    right:5px;

}

relative 定位

相对定位元素的定位是相对其正常位置。

h2.pos_left

{

    position:relative;

    left:-20px;

}

h2.pos_right

{

    position:relative;

    left:20px;

}

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

h2

{

    position:absolute;

    left:100px;

    top:150px;

}

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

所有的CSS定位属性

"CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。

属性 说明 值 CSS
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 auto
length
%
inherit		 2
clip 剪辑一个绝对定位的元素 shape
auto
inherit		 2
cursor 显示光标移动到指定的类型 url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help		 2
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 auto
length
%
inherit		 2
overflow 设置当元素的内容溢出其区域时发生的事情。 auto
hidden
scroll
visible
inherit		 2
overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 auto
hidden
scroll
visible
no-display
no-content		 2
overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域 auto
hidden
scroll
visible
no-display
no-content		 2
position 指定元素的定位类型 absolute
fixed
relative
static
inherit		 2
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 auto
length
%
inherit		 2
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 auto
length
%
inherit		 2
z-index 设置元素的堆叠顺序 number
auto
inherit		 2

Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>WENG</title>

<style>

.thumbnail

{

    float:left;

    width:110px;

    height:90px;

    margin:5px;

}

</style>

</head>

<body>

<h3>图片库</h3>

<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>

<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">

<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">

<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">

<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">

<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">

<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">

<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

</body>

</html>

CSS 中所有的浮动属性

"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。

属性 描述 值 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit		 1
float 指定一个盒子（元素）是否可以浮动。 left
right
none
inherit		 1

水平对齐(Horizontal Align)

中心对齐,使用margin属性

块元素可以把左，右页边距设置为"自动"对齐。

Note: 在IE8中使用margin:auto属性无法正常工作，除非声明 !DOCTYPE

margin属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素：

.center

{

  margin-left:auto;

  margin-right:auto;

  width:70%;

  background-color:#b0e0e6;

}

使用position属性设置左，右对齐

.right

{

  position:absolute;

  right:0px;

  width:300px;

  background-color:#b0e0e6;

}

使用float属性设置左，右对齐

使用float属性是对齐元素的方法之一

.right

{

  float:right;

  width:300px;

  background-color:#b0e0e6;

组合选择符

在 CSS3 中包含了四种组合方式:

  • 后代选取器(以空格分隔)
  • 子元素选择器(以大于号分隔）
  • 相邻兄弟选择器（以加号分隔）
  • 普通兄弟选择器（以破折号分隔）

后代选取器

后代选取器匹配所有值得元素的后代元素。

以下实例选取所有插入到 <div> 元素中的<p> 元素.

div p

{

  background-color:yellow;

}

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p

{

  background-color:yellow;

}

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p

{

  background-color:yellow;

}

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p

{

  background-color:yellow;

}

CSS学习（三）的更多相关文章

  1. Css学习(三)

    1 行高 ◆浏览器默认文字大小 浏览器默认文字大小:16px 行高:是基线与基线之间的距离 行高=文字高度+上下边距 一行文字行高和父元素高度一致的时候,垂直居中显示. 行高的单位 总结:单位除了像素 ...

  2. css学习归纳总结（三） 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  3. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  4. css学习归纳总结（一） 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  5. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  6. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  7. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  8. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  9. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  10. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

随机推荐

  1. ubuntu--dpkg 被中断

    主要原因应该是/var/lib/dpkg/updates 文件夹里面的资料有错误,使得更新软件的程序出现错误,所以得把它们完全删除,通过sudo apt-get update这个指令会重新建立这些资料 ...

  2. J - Borg Maze

    J - Borg Maze 思路:bfs+最小生成树. #include<queue> #include<cstdio> #include<cstring> #in ...

  3. NEFU 109

    n最大为2000000000(不知为什么OJ上是1000),若为判断2000000000是素数,则必有一个素数在sqrt(n)内,求出这个范围 的所有素数,其比最大数据小的n'的sqrt(n')也在这 ...

  4. unity3d 中动画的帧事件

    代码事件监听 using UnityEngine; using System.Collections; public class BoxEventScript : MonoBehaviour { vo ...

  5. 笔试题&amp;面试题：给定n个数，要求比較次数1.5n同一时候找出最大值和最小值

    写出一个算法,对给定的n个数的序列,返回序列中的最大和最小的数. 设计出一个算法,仅仅须要运行1.5n次比較就能找到序列中最大和最小的数吗?是否能再少? 分析:要求比較次数为1.5n,使用一般的逐个遍 ...

  6. BroadcastReceiver类

    java.lang.Object    ↳ android.content.BroadcastReceiver 已知直接子类 AppWidgetProvider DeviceAdminReceiver ...

  7. 英语发音规则---B字母

    英语发音规则---B字母 一.总结 一句话总结: 1.B发[b]音? bike [baɪk] n. 自行车 bus [bʌs] n. 公共汽车 bag [bæg] n. 袋:猎获物 baby ['be ...

  8. ubuntu16.04+caffe训练mnist数据集

    1.   caffe-master文件夹权限修改 下载的caffe源码编译的caffe-master文件夹貌似没有写入权限,输入以下命令修改: sudo chmod -R 777 ~/caffe-ma ...

  9. WCF：目录

    ylbtech-WCF:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.c ...

  10. filezilla的root账户无法连接服务器解决办法

    lz一直都是用filezilla上传文件到vm虚拟机的,用的是ubuntu14.04的系统.最近自己重新搭了lamp去做thinkphp的学习,lz有两个账户,一个是kin,另外一个是root.大家都 ...