CSS入门指南：从选择器到样式布局
CSS介绍
CSS是层叠样式表的简称，CSS是一种标记语言，称为CSS样式表
CSS主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式
结构（HTML）与样式（CSS）相分离
CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
CSS选择器
无语义化标签
<body><!-- div块级标签span行级标签没有语义化(两张白纸一样)，可以使用css对于这两个标签进行样式设置--><div>我是块级标签</div> 111<div>我是块级标签</div><div>我是块级标签</div><div><span>我是行级标签</span> <span>我是行级标签</span> <span>我是行级标签</span></div><div><span>我是行级标签</span> <span>我是行级标签</span> <span>我是行级标签</span></div>
</body>标签(元素)选择器
<head><meta charset="utf-8" /><title>标签选择器</title><style>span {background-color: yellow;}strong {color: rgb(206, 16, 73);}em {color: rgb(124, 16, 233);}p {background-color: aqua;}</style>
</head><body><h1>Type selectors</h1><p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoitomatillomelon azuki bean garlic.</p><p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sproutsfavabean collardgreens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p><p>Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce kohlrabi amaranth water spinachavocadodaikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach</p>
</body>类选择器
<head><meta charset="utf-8" /><title>类选择器</title><style>.highlight {background-color: yellow;}</style>
</head><body><!-- 类选择器，适用于我们可以将一些自定义的规则分组，将分组统一设置为一个样式--><h1 class="highlight">Class selectors</h1><p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span>daikonamaranth tatsoi tomatillomelon azuki bean garlic.</p><p class="highlight">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgettetatsoipea sprouts fava bean collardgreens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</body>ID选择器
<head><meta charset="utf-8" /><title>ID选择器</title><style>#heading {background-color: yellow;}#one {background-color: aquamarine;}</style>
</head><body><!-- id用于描述一个标签虽然使用id选择器，可以作用到多个标签上，也不会报错但是强烈建议，id只作用在一个标签上--><h1 id="heading">ID selector</h1><p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoitomatillomelon azuki bean garlic.</p><p id="one">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi peasprouts fava bean collardgreens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</body>id选择器和类选择器的区别
- 类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
- id选择器好比人的身份证号码，全中国唯一的，不能重复
- id选择器和类选择器最大的不同在于使用次数上
- 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和javaScript搭配使用
全局选择器
<head><meta charset="utf-8" /><title>全局选择器</title><style>* {color: red;}</style>
</head><body><h1>Universal selector</h1><p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoitomatillomelon azuki bean garlic.</p><p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sproutsfavabean collardgreens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</body>属性选择器
<head><meta charset="utf-8" /><title>属性选择器</title><style>/* 使用li[class]，我们就能匹配任何有 class 属性的选择器。这匹配了除了第一项以外的所有项 *//* li[class] {color: red;} *//* li[class="a"]匹配带有一个a类的选择器，不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类，它选中了第二项。 *//* li[class="a"] {color: red;} *//* li[class~="a"]会匹配一个a类，不过也可以匹配一列用空格分开、包含a类的值，它选中了第二和第三项。 *//* li[class~="a"] {color: red;} *//* li[class|="top"]匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。 *//* 开头是top,后边要有一个连字符 */li[class|="top"] {color: red;}</style>
</head><body><h1>Attribute presence and value selectors</h1><ul><li>Item 1</li><li class="a">Item 2</li><li class="a b">Item 3</li><li class="ab">Item 4</li><li class="top-a">Item 5</li><li class="top-b">Item 6</li></ul>
</body>子字符串匹配选择器
<head><meta charset="utf-8" /><title>子字符串匹配选择器</title><style>/* li[class^="a"]匹配了任何值开头为a的属性，于是匹配了前两项。 *//* li[class^="a"] {color: red;} *//* li[class$="a"]匹配了任何值结尾为a的属性，于是匹配了第一和第三项。 *//* li[class$="a"] {color: red;} *//* li[class*="a"]匹配了任何值的字符串中出现了a的属性，于是匹配了所有项。 */li[class*="a"] {color: red;}</style>
</head><body><h1>Attribute substring matching selectors</h1><ul><li class="a">Item 1</li><li class="ab">Item 2</li><li class="bca">Item 3</li><li class="bcabc">Item 4</li></ul>
</body>忽略大小写匹配
<head><meta charset="utf-8" /><title>忽略大小写匹配</title><style>/* 第一个选择器将会匹配一个开头为a的值，这样它只匹配了第一项，因为另外两项开头是大写的 A *//* li[class^="a"] {color: red;} *//* 第二个选择器使用了大小写不敏感的标记，于是匹配了所有项 */li[class^="a" i] {color: red;}</style>
</head><body><h1>Case-insensitivity</h1><ul><li class="a">Item 1</li><li class="A">Item 2</li><li class="Ab">Item 3</li></ul>
</body>普通伪类选择器
<head><meta charset="utf-8" /><title>普通伪类选择器</title><style>p:first-child {color: red;}</style>
</head><body><!-- div中的第一个段落标红 --><div><p>新增段落</p><p>段落</p><p>段落1</p><p>段落2</p><p>段落3</p></div><div><p>新增段落</p><p>段落</p><p>段落4</p><p>段落5</p><p>段落6</p></div><p>独立段落1</p><p>独立段落2</p>
</body>行为伪类选择器
<head><meta charset="utf-8" /><title>行为伪类选择器</title><style>/* 超链接标签1.没有访问过标签2.鼠标移动到该标签上3.按下鼠标4.访问链接以后*/a:link {color: blue;}a:hover {color: yellow;}a:active {color: red;}a:visited {color: darkgray;}</style>
</head><body><a href="http://www.baidu.com/">跳转官网</a>
</body>关系选择器
交集选择器
<head><meta charset="utf-8" /><title>交集选择器</title><style>/* p {color: red;} *//* .tag {color: red;} */p.tag {color: red;}</style>
</head><body><h1 class="tag">我是标题</h1><p class="tag">我是一个p标签</p><p id="title">我是一个p标签</p>
</body>并集选择器
<head><meta charset="utf-8" /><title>并集选择器</title><style>p,.tag {color: red;}</style>
</head><body><h1 class="tag">我是标题</h1><p class="tag">我是一个p标签</p><p id="title">我是一个p标签</p>
</body>后代选择器
<head><meta charset="utf-8" /><title>后代选择器</title><style>ul li {color: red;}</style>
</head><body><ul><li>Unordered item</li><li>Unordered item</li><ol><li>Item 1</li><li>Item 2</li></ol></ul>
</body>子代选择器
<head><meta charset="utf-8" /><title>子代选择器</title><style>ul>li {color: red;}</style>
</head><body><ul><li>Unordered item</li><li>Unordered item</li><ol><li>Item 1</li><li>Item 2</li></ol></ul>
</body>邻接兄弟选择器
<head><meta charset="utf-8" /><title>邻接兄弟选择器</title><style>h1+p {color: red;}</style>
</head><body><!-- 选中的是挨着h1标签的p标签 标红 --><div><h1>标题</h1><p>段落1</p><p>段落2</p></div>
</body>通用兄弟选择器
<head><meta charset="utf-8" /><title>通用兄弟选择器</title><style>h1~p {color: red;}</style>
</head><body><div><h1>标题</h1><p>段落1</p><p>段落2</p><div><p>内嵌段落</p></div><p>段落3</p></div>
</body>CSS样式
行内样式
<head><meta charset="utf-8" /><title>行内样式</title>
</head><body><div><!-- 行内样式标签 属性：style="样式属性:属性值;样式属性:属性值;"当你只对这一个元素进行样式控制的时候，方便起见，使用行内样式弊端：【1】当页面中有多个元素需要做样式控制，行内样式不能复用的将相同的样式设置，在很多标签中重复编写【2】尽量将内容和样式控制，拆开--><p style="color: red; font-size: 20px;">段落1</p><p style="color: red;">段落2</p><p style="color: red;">段落3</p></div>
</body>内部样式
<head><meta charset="utf-8" /><title>内部样式</title><style>p {color: red;}/* 好处1.将样式控制抽取出来了，一个样式可以作用到多个标签上，样式可以复用的2.将内容和样式分开了，代码阅读更加方便弊端内部样式只能作用于当前页面，针对当前页面的内容进行样式控制但是如果有多个页面都想用到同一个样式，内部样式就不能实现样式的共享了*/</style>
</head><body><div><p>段落1</p><p>段落2</p></div>
</body>外部样式
#one {color: green;
}
<head><meta charset="utf-8" /><title>外部样式1</title><!-- 引入外部文件，外部文件的样式就会作用于当前页面 --><!-- rel="stylesheet" 表示被链接的文件是当前 HTML 文档的 样式表 --><!-- href表示会根据这个路径加载对应的CSS文件 --><link rel="stylesheet" href="css/index.css">
</head><body><div><p>段落1</p><p>段落2</p></div>
</body>
层叠样式表
优先级效果
<head><meta charset="utf-8" /><title>优先级效果</title><style>#one {color: red;}.oneClass {color: green;}p {color: blue;}</style><body><p id="one" class="oneClass">段落</p>
</body>
当同时存在多个选择器，且产生冲突时：ID选择器>类选择器>标签选择器>全局选择器。
非关系选择器优先级
<head><meta charset="utf-8" /><title>非关系选择器优先级</title><!-- 0. !important 优先级高于行内 修饰选择器1.行内样式优先级大于其他2.内部样式和外部样式，会根据加载顺序，加载进文档，形成文档流分析这个文档流中的这些选择器优先级（内部和外部引入进来的）和内部引入还是外部引入无关3. 拿到文档流，分析文档流的这些选择器的优先级id选择器属性选择器 伪类选择器类选择器标签选择器全局选择器4.在文档流中，有两个优先级相同的选择器，最终谁生效就近原则，最后一个选择器会生效5. 可以做到子父继承，部分属性父容器的样式，会传递给子容器，子容器具备同样的样式优先级最低的一旦子有样式，就会覆盖掉父传递过来的，使用自己的--><!-- <style>#one {color: blue;}</style><link rel="stylesheet" href="css/index.css"><style>#one {color: red;}</style> --><style>/* id选择器 */#one {color: deeppink;}/* 属性选择器 */p[class] {color: yellow;}/* 普通伪类选择器 */p:first-child {color: chocolate;}/* 类选择器 */.classOne {color: green;}/* 标签选择器 */p {color: blue;}/* 全局选择器 */* {color: red !important;}/* 父容器 */div {background-color: blueviolet;}/* 子容器 */span {background-color: cyan;}</style><body><p id="one" class="classOne" style="color: gray;">段落</p><div>段落<span>行内</span></div>
</body>加载文档流
<head><meta charset="utf-8" /><title>加载文档流</title><!-- 内部样式 --><style>p {color: red;}</style><!-- 外部样式 --><link rel="stylesheet" href="css/index.css"><!-- 内部样式 --><style>p {color: blue;}</style><body><!-- index.css文件中显示的是绿色 --><!-- 最终呈现结果是蓝色 --><p>段落</p>
</body>关系选择器优先级
<head><meta charset="utf-8" /><title>组合选择器优先级</title><style>/*1个id选择符 1个元素选择符 1个类选择符 1-1-1*//* div #box-second-id .box-three-class {color: red;} *//*2个id选择符 1个元素选择符 2-0-1*/div #box-second-id #box-three-id {color: red;}/*2个id选择符 1个元素选择符 2-0-1*/div #box-second-id #box-three-id {color: blue;}/*最后在浏览器上面显示 blue 颜色的文字*/</style><body><div class="box-first-class" id="box-first-id"><div class="box-second-class" id="box-second-id"><div class="box-three-class" id="box-three-id">我是一个p标签</div></div></div>
</body>CSS属性
背景颜色属性
<head><meta charset="utf-8" /><title>背景颜色属性</title><style>/* 1.英文表示颜色2.使用rgb形式表示颜色，控制三原色的数值，组成任意一个颜色0-255 256个数值3. 0-15 0-15 -> 256*/p {/* background-color: rgb(207, 238, 255); */background-color: #CFEEFF;}</style><body><p>段落</p>
</body>字体族属性
<head><meta charset="utf-8" /><title>字体样式属性</title><style>/* 如果第一项不支持就寻找第二项 */p {font-family: "华文琥珀", "楷体", "微软雅黑";}</style><body><p>段落</p>
</body>字体大小属性
<head><meta charset="utf-8" /><title>字体样式属性</title><style>span {/* font-size: xx-small; *//* font-size: 16px; *//* 相对于父容器的字体偏小 *//* font-size: smaller; *//* font-size: 120%; */font-size: 0.8em;}p {font-size: 20px;}</style><body><p>段落<span>行内</span>段落</p>
</body>字体风格属性
<head><meta charset="utf-8" /><title>字体风格属性</title><style>/* 斜体 */#one {font-style: italic;}</style><body><p id="one">动力节点powernode1</p><p id="two">动力节点powernode2</p>
</body>字体粗细属性
<head><meta charset="utf-8" /><title>字体粗细属性</title><style>#one {font-weight: normal;}#two {font-weight: lighter;}#three {font-weight: bold;}#four {font-weight: bolder;}</style><body><p id="one">动力节点powernode1</p><p id="two">动力节点powernode2</p><p id="three">动力节点powernode3</p><p id="four">动力节点powernode4</p>
</body>组合字体属性
<head><meta charset="utf-8" /><title>字体粗细属性</title><style>#one {/* font-family: "微软雅黑";font-size: 20px;font-style: italic;font-weight: bold; *//* 其他字体属性 字体大小 字体族 */font: italic bold 50px "微软雅黑";}</style><body><p id="one">动力节点powernode1</p>
</body>文本颜色属性
<head><meta charset="utf-8" /><title>文本颜色属性</title><style>p {color: blue;}</style><body><p id="one">动力节点powernode1</p>
</body>文本间距属性
<head><meta charset="utf-8" /><title>文本间距属性</title><style>/* 字母间距 *//* #one {letter-spacing: 10px;} *//* 单词间距 *//* #one {word-spacing: 30px;} */#two {letter-spacing: 10px;}#two {word-spacing: 30px;}</style>
</head><body><p id="one">people mountain people sea</p><p id="two">人山人海 大山大河</p>
</body>
</html>文本划线属性
<head><meta charset="utf-8" /><title>划线属性</title><style>span {text-decoration: underline;}#oneClass {text-decoration: line-through;}</style>
</head><body><p id="one">所在城市:<span>北京</span></p><p id="two">原价:<span id="oneClass">15</span>,现价9.9!</p>
</body></html>文本缩进属性
<head><meta charset="utf-8" /><title>文本缩进属性</title><style>p {text-indent: 40px;font-size: 20px;}</style>
</head><body><p>本书从初学者的角度出发</p>
</body>文本对齐方式属性
<head><meta charset="utf-8" /><title>文本对齐方式属性</title><style>p {text-align: right;}</style>
</head><body><p>段落</p>
</body>文本行高属性
<head><meta charset="utf-8" /><title>文本行高属性</title><style>p {/* 从页面最上方开始计算 */line-height: 16px;}</style>
</head><body><p>本书从初学者的角度出发，作为实战型Java零基础书籍，本书不做大量的学术性研究，而是把企业实战开发中用到的知识点进行精细讲解，把使用频率非常低的技术进行告知性讲解，把淘汰的技术进行屏蔽。</p>
</body>
列表属性
<head><meta charset="utf-8" /><title>列表属性</title><style>ol {/* list-style-type: upper-alpha; */list-style-type: disc;/* list-style-type: none; *//* list-style-type: lower-alpha; */}</style>
</head><body><ol><li>抽烟</li><li>喝酒</li><li>烫头</li></ol>
</body>边框属性
<head><meta charset="utf-8" /><title>边框属性</title><style>div {/* border-width: 2px;border-color: blue;border-style: dotted; */border: blue 2px dotted;}</style><body><div>块级标签</div>
</body>盒子模型
<head><meta charset="utf-8" /><title>盒子模型</title><style>#div1 {border: 3px red solid;}#div2 {border: 2px green solid;text-align: right;/* justify-content: space-between; 两端对齐，元素之间有最大间距 */padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;/* padding: 10px; */margin-top: 10px;margin-bottom: 10px;margin-left: 10px;margin-right: 10px;/* margin: 10px; */}#span1 {border: 1px blue solid;}#span2 {border: 1px blue solid;}</style><body><div id="div1"><div id="div2"><span id="span1">span</span><span id="span2">span</span></div></div>
</body>元素分类
块级元素
<head><meta charset="utf-8" /><title>块级元素</title><style>/* 元素分类块级元素行内元素行内块级元素块级元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。可设置四个方向的padding和margin值。常见的块级元素有：body, div，p，h1~h6，ul，ol，li，pre等。块级元素具有以下特点：1.总是在新行上开始，占据一整行；2.高度属性（height）和宽度属性（width）可以设置，并且外边距和内边距都可控制；3.宽始终是与父元素宽度一样，与内容无关；4.它可以容纳行内元素和其它块级元素。*/#div1 {border: 3px red solid;}#div2 {height: 60px;/* width: 100px; */border: 2px green solid;}#span1 {border: 1px blue solid;}#span2 {border: 1px blue solid;}</style><body><div id="div1"><div id="div2"><span id="span1">span</span><span id="span2">span</span></div></div>
</body>行内元素
<head><meta charset="utf-8" /><title>行内元素</title><style>/* 内联元素又称为行内元素，内联元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内尽量不要包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。只能设置左右方向的padding和margin值，上下无法设置。常见的行内元素有：a，em，strong，span, i, u, del等。行内元素的特点：1.可以和别的行内元素和行内块级元素共享一行；2.不能设置高度属性（height）和宽度属性（width），另外内边距和外边距部分可控制；3.行内标签的宽度只与内容有关；4.行内元素只能容纳文本或者其他行内元素。 */#div1 {border: 3px red solid;}#div2 {border: 2px green solid;text-align: center;}#span1 {/* margin-top: 20px;margin-bottom: 20px;margin-left: 20px; *//* margin-right: 30px; *//* 只能控制左右方向边距 */padding-right: 20px;letter-spacing: 20px;line-height: 100px;border: 1px blue solid;}#span2 {border: 1px blue solid;}</style><body><div id="div1"><div id="div2"><span id="span1">span1</span><span id="span2">span2</span></div></div>
</body></html>行内块级元素
<head><meta charset="utf-8" /><title>行内块级元素</title><style>/* 行内块级元素既有块级元素的特点，又有内联元素的特点。可以与其他行内元素位于同一行，宽度由内容的长度控制，但可以设置宽（width）和高（height），也可以设置四个方向的padding(内边距)和margin(外边距)值。常见的行内块级元素有img和input。行内块级元素的特点：1.行内块级元素可以设置宽度（width）和高度（height）属性；2.行内元素可以和别的行内元素和行内块级元素共享一行。 */#img1 {width: 500px;height: 500px;margin-top: 200px;}</style><body><div id="div1"><div id="div2"><img src="img/动力节点.jpeg" id="img1"><img src="img/动力节点.jpeg" id="img2"></div></div>
</body>display属性
<head><meta charset="utf-8" /><title>display属性</title><style>/* display属性，可以将一个元素类型转为另一个元素类型属性值none 此元素不会被显示，不保留物理空间。block 此元素将显示为块级元素，此元素前后会带有换行符。inline 此元素会被显示为行内元素，元素前后没有换行符。inline-block 行内块元素。*/#span1 {display: none;}</style><body><div id="div1"><div id="div2"><span id="span1">span1</span><span id="span2">span2</span></div></div>
</body>浮动
<head><meta charset="utf-8" /><title>浮动</title><style>.box {width: 80px;height: 100px;float: left;}p {text-align: left;}</style><body><h1>Simple float example</h1><img src="img/零基础学Java.png" class="box" /><p>本书从初学者的角度出发,作为实战型Java零基础书籍,本书不做大量的学术性研究，而是把企业实战开发中用到的知识点进行精细讲解，把使用频率非常低的技术进行告知性讲解，把淘汰的技术进行屏蔽。为学员减负，让学员把主要精力用在学习当下火热的技术上，真正达到学以致用和知其然知其所以然。</p><p>本书从初学者的角度出发,作为实战型Java零基础书籍,本书不做大量的学术性研究，而是把企业实战开发中用到的知识点进行精细讲解，把使用频率非常低的技术进行告知性讲解，把淘汰的技术进行屏蔽。为学员减负，让学员把主要精力用在学习当下火热的技术上，真正达到学以致用和知其然知其所以然。</p><p>本书从初学者的角度出发,作为实战型Java零基础书籍,本书不做大量的学术性研究，而是把企业实战开发中用到的知识点进行精细讲解，把使用频率非常低的技术进行告知性讲解，把淘汰的技术进行屏蔽。为学员减负，让学员把主要精力用在学习当下火热的技术上，真正达到学以致用和知其然知其所以然。</p>
</body>静态定位
<head><meta charset="utf-8"><title>静态定位</title><style>/* 静态定位：文档流的默认位置 */#pos_left {position: static;}#pos_right {position: static;}</style>
</head><body><h2>这是位于正常位置的标题</h2><div id="div1"><h2 id="pos_left">这个标题相对于其正常位置向左移动</h2><h2 id="pos_right">这个标题相对于其正常位置向右移动</h2></div></body>相对定位
<head><style>/* 相对定位：相对正常文档流的位置进行定位 */#pos_left {position: relative;left: -20px;}#pos_right {position: relative;left: 20px;}</style>
</head><body><h2>这是位于正常位置的标题</h2><div id="div1"><h2 id="pos_left">这个标题相对于其正常位置向左移动</h2><h2 id="pos_right">这个标题相对于其正常位置向右移动</h2></div></body>绝对定位
<head><style>/* 绝对定位1.如果没有父容器，或者父容器没有定位，就以浏览器为定位标准2.如果父容器有定位，就以父容器为定位标准 */#div1 {background-color: aqua;position: absolute;right: 0px;top: 0px;}#div2 {background-color: red;width: 500px;height: 500px;position: relative;}</style>
</head><body><div id="div2">父容器<div id="div1">绝对定位</div></div>
</body>固定定位
<head><style>/* 固定定位相对浏览器窗口进行定位，不会相对其他元素，当浏览器出现滑动滚轮的时候，元素不会变*/#div1 {background-color: aqua;position: fixed;right: 0px;bottom: 0px;}</style>
</head>