一、引入CSS的方式
内联式、嵌入式和外链式
1.内联式
<p style="color:red">paragraph</p>
2.嵌入式
<style type="text/css">
p {
background-color: #00539F;
font-size: 2em;
text-align: center;
}
</style>
3.外链式
<link rel="stylesheet" type="text/css" href="style.css">
二、CSS选择器
简单选择器
1.通配选择器
通配选择器可以匹配所有元素。下面的代码可以去掉默认的margin。
* {
margin: 0;
}
2.标签选择器
使用标签进行选择，选中所有的该标签，一般用于语义标签和组合选择器。
p {
font-size:12px;
}
3.id选择器
为标签设置id="ID名称"，选择时使用#id选择器名称 {css样式代码;}
4.类选择器
为标签设置class="class名称"，选择时使用.class选择器名称 ｛css样式代码；｝
注意：class选择器与id选择器的区别：一个元素可以有多个class名称，一个class名称也可以被多个元素使用，但id选择器不可以，它是唯一的。另外id选择器的优先级要大于class选择器。
属性选择器
- 多用于input标签。
-
input[name] {}：选中所有具有name属性的输入框。 -
input[type="password"]：选中所有类型为“密码”的输入框。 -
input[title~="flower"]：选中title属性包含单词 "flower" 的所有元素，属性中各个单词以空格分隔。 -
input[title*="demo"]：选中title属性包含“demo”的所有元素。 -
input[title^="demo"]：选中title属性以“demo”开头的所有元素。 -
input[title$="demo"]：选中title属性以“demo”结尾的 所有元素。
伪类选择器
- a标签
-
a:link {}：选中未访问过的链接。 -
a:visited {}：选中已访问过的链接。 -
a:hover {}：鼠标移到链接上的样式。 -
a:active {}：鼠标在链接上按下时的样式。 -
a:focus {}：获得焦点时的样式。
伪元素
E:first-line {}：匹配E元素的第一行
E:first-letter {}：匹配E元素的第一个字母
E:before {}：在E元素之前插入生成的内容
E:after {}：在E元素之后插入生成的内容
组合选择器
-
h1,p {}：同时为一组选择器定义样式。
直接组合EF
p.warning { color: orange; }
后代组合E F
- 选中article标签下的所有p元素
article p{
color:red;
}
亲子组合E > F
-
选中article标签下的第一代p元素
article > p {} -
注意： 亲子选择器与后代选择器的区别是后代选择器可以选中所有子代，亲子选择器只选择第一代子代。
其他选择器
- 选中id="introduction"下的第一个p标签：
.introduction p:nth-of-type(1) {
color: blue;
}
更多：（http://www.ruanyifeng.com/blog/2009/03/css_selectors.html）
三、层叠与继承
特异度级别
- 内联：1000；id选择器：100；类、伪类：10；标签选择器、伪元素：1；
样式的的覆盖规则
- 根据引入方式：优先级由高到低依次为：“内联属性”——>“嵌入”——>“外链”。
- 按照特异度排序，后面的优先级高。
- 特异度一样时，按照样式书写顺序，后面的优先级高。
- 加有“！important”的样式，优先级最高：即无论哪一种情况，只要在样式上加了important,那么该样式的优先级最高。
关于继承
- 继承，就是父元素的规则也会适用于子元素。
- 对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。
四、文本样式
- font-family：字体设置
- font-size：文字大小，可使用px，百分比等作为单位，取值也可为绝对值small和相对值smaller等。
- font-style：斜体设置。取值可为normal、italic、oblique。
- font-weight：文字的粗细程度，粗体为bord。
- line-height：元素所属的行所占的高度，段落文字一般取值为1.4~1.8。也可用于竖直方向的居中。
- text-align：文本在容器内的对齐方式（水平）。
- vertical-align：竖直方向的对齐方式。
- font缩写：font的众多属性可以集中在一条属性中写
h1 {
/* 斜体 粗细 大小/行高 字体族 */
font: italic bold 20px 'Times New Roman';
}
其他样式：
- 将字母变为首字母大写：
p {text-transform: capitalize;}（大写、小写同理） - 去掉超链接默认的颜色、下划线等样式：
a {text-decoration: none;} - 去掉无序列表前的实心原点：
li {list-style: none;} - 设置背景为图片：
background-image: url(""); - 设置背景图片不重复：
background-repeat: no-repeat; - 设置背景位置：
background-position: 10px; - 设置图像分不透明度：
img {opacity: 0.6;}
五、盒模型
- margin:外边距； border:边框； padding:内边距；content:内容
- 盒模型中的width和height是content box的宽度
- 对于margin、border、padding，均可为其设置top right bottom left的值，也可以进行缩写。
- 边框样式border-style的取值有none | solid | dashed | dotted | double。
- 设置边框圆角：
border-radius: 5px; - 表格边框线合并：
border-collapse: collapse;
六、CSS布局
注：可以使用百分比宽度进行布局。
使用inline-block
- vertical-align 属性会影响到 inline-block元素，你可能会把它的值设置为 top。
- 需要设置每一列的宽度。
- 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙。
position
- static（默认）、relative、absolute、fixed、sticky、inherit
- 绝对定位（absolute）：不占据常规流位置，相对于包含块进行偏移（包含块为最近一级外层元素position不为static的元素）
- 相对定位（relative）：相对于之前常规流位置发生偏移，原先位置仍然占据
- 固定定位（fixed）：相对于视窗进行定位，不再占有常规流位置
浮动（float）
-
浮动元素会从常规流中脱离，漂浮在容器(包含块)左边或右边
-
清除浮动：clear
常用的三栏布局方式
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.middle {
width: 100%;
float: left;
}
.main {
margin: 0 200px;
height: 400px;
background: pink;
}
.left {
width: 200px;
height: 200px;
float: left;
background: blue;
margin-left: -100%;
}
.right {
width: 200px;
height: 200px;
float: left;
background: yellow;
margin-left: -200px;
}
* {
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
}
</style>
</head>
<body>
<div class="middle">
<div class="main">ffffff</div>
</div>
<div class="left">side1</div>
<div class="right">side2</div>
</body>
</html>
七、常用的居中方式
水平居中
- 行内元素：对父元素设置text-align:center;
- 定宽块状元素：设置左右margin值为auto;
- 不定宽块状元素：设置子元素为display:inline,然后在父元素上设置text-align:center;
- 通用方案：flex布局，对父元素设置display:flex;justify-content:center。
垂直居中
- 父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
- 父元素一定，子元素为多行内联文本：设置父元素的display: inline-block，再设置vertical-align: middle;
- 块状元素：设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
- 通用方案：flex布局，给父元素设置{display:flex; align-items:center;}。
网友评论