CSS 是控制 HTML 的，我们需要选中元素再控制 CSS 的常见使用方式分别是：行间式、内嵌式和外链式 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 外链式 -->
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!-- 内嵌式 -->
<style>
#test{
background:red;
}
</style>
</head>
<!-- 行间式 -->
<body style="background:blue;">
<div id="test">
abc
</div>
<div id="test1">
jkl
</div>
</body>
</html>
index.css
#test1{
background:green;
}
行间式优先级最高，内嵌式和外链式哪个后生效，哪个有效，会覆盖先生效的
群组选择器
- 可以使用标签选择器与 class 选择器选择多个元素
- 选择多个元素时，设定的样式多个元素都会生效
- 优先级：id > class > 标签
文字位置控制
- 设置文字的左中右对齐，使用样式：
text-align- 左：
left（默认） - 中：
center - 右：
right
- 左：
- 设置文字的上下行高，使用样式：
line-height- 偏上：上边框到文字的距离乘以2，再加上文字的高度
- 中：当
line-height的值设为height的值，文字会在中间 - 偏下：和偏上一样，用上边框到文字顶部的距离，乘以2，再加上文字自身的高度
元素边框
- 使用
border样式设定元素边框 border是复合属性，包含了边框的宽度、边框样式和颜色- 边框样式包括实线
solid，虚线dashed等 - 例子：
border: 2px solid blue;也可以不使用复合属性border，分别设置边框的宽度，样式，颜色
- 边框样式包括实线
- 设置边框宽度使用：
border-width - 设置边框样式使用：
border-style - 设置边框颜色使用：
border-color还可以设置某一侧的边框，比如设置左侧边框： - 使用复合属性：
border-left: 5fx solid #blue; - 不使用复合属性：
border-left-width: 5px;border-left-style: solid;border-left-color: blue;右边框：border-right，上边框：border-top，下边框：border-bottom
元素圆角
设定元素的圆角，使用 border-radius 样式
- 同时设定四个角：
border-radius: 10px; - 分别设定左上角、右上角、右下角和左下角：
border-radius: 10px 20px 30px 40px; - 设定左上角：
border-top-left-radius: 10px; - 设定右上角：
border-top-right-radius: 10px; - 设定左下角：
border-bottom-left-radius: 10px; - 设定右下角：
border-bottom-right-radius: 10px;
层级选择器
- 后代选择器：空格，选择后面所有
- 层级选择器：
>，选择后面第一层
浮动布局
浮动布局可以使元素横排显示，可以从左到右，也可以从右到左
- 从左向右：
float: left; - 从右向左：
float: right;float能让行内元素变成块元素，比如span，加上float之后，宽，高，背景色等这些样式就都可以生效
外边距
使用外边距来控制元素的上下左右距离
-
上边距：
margin-top -
下边距：
margin-bottom -
左边距：
margin-left -
右边距：
margin-right -
浮动会加边距，不浮动会重叠 缩写的形式
-
上下左右各100像素边距：
margin: 100px; -
上下100像素左右200像素：
margin: 100px 200px; -
上100左右200下300：
margin: 100px 200px 300px; -
上100右200下300左400：
margin: 100px 200px 300px 400px;外边距在浮动和非浮动环境下有区别
内边距
使用内边距来控制元素内部的内容与边的距离
- 距左边10像素：
padding-left: 10px; - 距上边10像素：
padding-top: 10px; - 距右边10像素：
padding-right: 10px; - 距底边10像素：
padding-bottom: 10px;缩写的形式 - 距上下左右各100像素：
padding: 100px; - 距上下100左右200：
padding: 100px 200px; - 距上100距左右200距底边300：
padding: 100px 200px 300px; - 距上100距右200距底300距左400：
padding: 100px 200px 300px 400px;内边距会改变元素整体尺寸
盒子模型
可以认为块级元素在网页中布局时就像一个盒子
影响盒子的大小的样式有内容、内边距、边框、外边距、宽度、高度
行内元素使用 float 可以支持宽度和高度，不过仍然不会自成一行
行内元素使用 display: block 可以变成块元素，不仅支持宽度高度，同时自成一行
图文混排
图文混排一般使用 dl(definition lists) 标签来设定 dl 中包含 dt(define list title) 和 dd(define list define) 标签
颜色设定
background 是一个缩写样式，可以使用非缩写样式单独进行一些设定
background-color设定颜色background-image设定背景图片
背景设定
在设定背景图片的时候，可以进行一些具体设定
- 平铺：
background-repeat- 平铺：
background-repeat: repeat;（默认） - 不平铺：
background-repeat: no-repeat; - 横向平铺：
background-repeat: repeat-x; - 纵向平铺：
background-repeat: repeat-y
- 平铺：
- 大小：
background-size- 设定宽度150像素，高度150像素：
background-size: 150px 150px; - 设定宽度为150px：
background-size: 150px; - 设定高度为150px：
background-size: auto 150px; - 覆盖：
background-size: cover; - 宽图横向完整展示，长图纵向完整展示：
background-size: contain;
- 设定宽度150像素，高度150像素：
- 定位：
background-position- 向右150像素，向下150像素：
background-position: 150px 150px; - 定位到右下角：
background-position: right bottom; - 定位到右边中间：
background-position: right center; - 定位到右上角：
background-position: right top; - 定位到中心：
background-position: center center; - 定位到中间顶部：
background-position: center top; - 定位到中间底部：
background-position: center bottom; - 定位到左上角：
background-position: left top; - 定位到左边中间：
background-position: left center; - 定位到左下角：
background-position: left bottom; - 单独设定横向像素：
background-position-x: 150px; - 单独设定纵向像素：
background-position-y: 150px; - 单独设定横向位置：
background-position-x: right; - 单独设定纵向位置：
background-position-y: bottom;
- 向右150像素，向下150像素：
背景样式缩写
在背景需要设定比较多的样式的时候，可以使用缩写的方式 依次设定背景的颜色 、图片、平铺方式、定位和尺寸：
backgrouond: pink url(img/1.jpg) repeat-x 30px 30px/50px 50px;
文字样式设定
文字相关样式
- 文字颜色：
color: blue; - 文字大小：
font-size: 12px;（默认16像素，最小12像素） - 文字粗细：
font-weight: 100;（100～900，默认400）- 也可以用单词：
- 默认：
font-weight: normal; - 加粗：
font-weight: bold; - 最粗：
font-weight: bolder; - 最细：
font-weight: lighter;
- 默认：
- 也可以用单词：
- 文字风格
- 默认：
font-style: normal; - 斜体：
font-style: italic;
- 默认：
- 首字母大写：
text-transform: capitalize; - 大写转小写：
text-transform: lowercase; - 字体类型：
font-family: "行书"; - 首行缩进：
text-indent: 32px; - 英文自动换行：
word-wrap: break-word; - 中文会自动换行，取消自动换行：
white-space: nowrap; - 缩写，分别设定：斜体，粗细，大小，行高，字体
font: italic bold 20px/100px cursive;
定位
定位：position
- 相对定位：
position: relative;- 根据元素的原始位置进行定位
- 距左30像素：
left: 30px; - 定位之后，原来的位置仍然占着
- 绝对定位：
position: absolute;- 根据外层元素进行定位，如果外层元素都没有定位，就根据浏览器的边框进行定位
- 距最近有定位的外层元素上边30像素：
top: 30px; - 定位之后，原来的位置释放
- 如果两个元素元素都有定位，那么哪个元素的
z-index: 10;值大，哪个元素就在上面 - 如果根据浏览器窗口定位，在浏览器有滚动条的时候，只显示在第一屏
- 固定定位：
position: fixed;- 根据浏览器边框进行定位
- 距浏览器边框顶部0像素：
top: 0; - 浏览器窗口有滚动条，也会固定不动
- 默认定位：
position: static;- 不能通过
z-index进行分级 - 可以用来去掉前面给的定位样式
- 不能通过
流
- 标准流
- 元素默认排序的显示方式
- 非标准流
- 元素因为样式而产生的布局方式，比如浮动、定位等样式，都会改变默认排序的显示方式
- 标准流和非标准流不要混用，比如使用了浮动样式，那就都添加浮动
- 定位的优先级高于浮动
块、行内、行内块
- 块元素可以使用
display转成行内元素display: inline;
- 行内元素可以使用
displayfloatposition转成块元素display: bloack;position要使用absolute或者fixed
- 行内块元素
display: inline-block;- 行内块既支持块元素的宽、高、边距等样式，也像行内元素一样不会独占一行
img和input都属于行内块元素
CSS 的重置方式与命名规范
重置
为了防止默认样式的影响，在项目中会使用标准的 CSS 重置方式对 CSS 进行重置
<link rel="stylesheet" type="text/css" href="css/reset.css">
命名规范
- 匈牙利命名法：属性+类型+描述
fbtnouther浮动+按钮+在最外层pdivouter定位+div+在最外层
- 驼峰命名法
p_div_outer
- 帕斯卡命名法
pDivOuter
百分比
除了使用像素，还可以使用百分比
百分比一般会根据当前元素的父级进行计算
margin 和 padding 是根据父级的 width 计算的
position 是根据父级
溢出
使用 overflow 样式设定元素的溢出状态
其中 hidden 会把溢出的内容修剪，scroll 与 auto 会以滚动条的形式呈现溢出的内容
透明
使用 opacity 样式设置元素的透明度
- 完全透明：
opacity: 0; - 完全不透明：
opacity: 1;
伪类
:hover鼠标悬浮:active鼠标点击:link未访问过的链接:visited访问过的链接，只支持background和color两个样式
光标
a 标签 <a></a> 和文本域 <textarea></textarea> 以及 <input/> 自带光标样式
自定义光标样式使用 cursor
cursor: pointer;小手cursor: cell;加号- 等等...
