01-04css
- 样式表
- CSS中的注释
- CSS常用选择器
- 文本样式
- 列表样式
- overflow属性
- display属性
- 盒子模型
- 文档流
CSS基本语法
概念：CSS规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要设置样式的HTML元素
每条声明由一个属性和一个值组成
属性（property）是您希望设置的样式属性（style attribute）。属性与属性之前用分号，属性和值用冒号
样式表
概念：对标签显示样子设置，美化标签 ，css:层叠样式表
在html怎样使用样式
- 内联：在标签上直接使用
<p style="color: lime;">你好，我是翠绿色p>
- 内部引用，在head标签里面书写style标签，把样式写到style标签里面
<head> <style type="text/css"> span{ color: green; } p{ color:red; } style> head> <body> <p>shdfhdsfklh<span>sakspan>fdhsap> body>
- 外部引用，将样式放在一个样式文件里面 通过文档头部的标签来引入样式表
<head> /* 引用外部的style.css， rel属性：定义当前文档与被链接文档之间的关系。用于操作样式表时，rel属性的值为“stylesheet” */ <link rel="stylesheet" href="style.css"> head> <h3>这么强，可怕!!!!!h3> 以下是在css文件里 h3{ color:yellowgreen; }样式优先级: 当发生样式定义冲突时，浏览器首先会按照不同样式规则的优先级来应用样式,一般遵守"就近优先"原则
CSS中的注释
概念：注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以 /* 开始, 以 */ 结束。
/*这是个注释*/
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
换行
white-space: nowrap; 不换行
word-wrap: break-word; 允许超出元素内容部分自动换行
CSS常用选择器
概念：CSS选择器用于定位你要操作的元素：
- 标签名选择器，通过标签名找到
选择指定标签的所有元素p 选择所有 元素
- 类选择器,通过标签的class属性名字找到标签，使用时需要在名前加.class的名字可以重复
.c1 {
color: red;
}
.c2 {
color: lime;
}
<p> <span class="c1">第三span><span class="c2">规范环境span> p>
- id选择器：同标签的id属性值来找到标签，使用时需要在名字前加#，在同一个网页中id的名字不能重复
#p1 {
color:blueviolet;
}
<p id="p1">32454365476547p>
- 属性选择器 选择具有指定属性或属性值的所有元素
/* option[value]:option标签里面有value属性的，任意属性都可以 */
/* option[value="o1"]:option标签中有value属性，并且值等于o1的标签 */
<select name="s1">
<option value="o1">aoption>
<option>aoption>
<option value="o5">aoption>
select>
- 伪类和伪元素选择器 选择具有指定状态或位置的元素
概念：伪类是一种状态，给标签的一种状态设置样式就叫伪类选择器
:hover：设置元素在其鼠标悬停时的样式
/* 鼠标指针进入选择标签 */ p:hover{ color:lime; }hello
:enable 选择每个已启动的元素
/* 没有被禁用的标签 */ input:enabled { background-color: lime; }:disabled 选择每个已禁止的元素
input:disabled { background-color: lime; }:read-only 选择有"readonly"的表单元素，注意只读包含禁用，所以也会影响具有"disabled"的表单元素
:read-write 选择没有"readonly"的表单元素，设置了disabled的元素也认为设置了readonly
:first-child 选择满足是其父元素的第一个子元素的元素
:last-child 选择满足是其父元素的最后一个子元素的元素
:focus 选择拥有键盘输入焦点的元素 - 一般用于输入框中 鼠标光标进入
:checked+ 要改变的元素 选择每个被选中的元素
/* input:checked+label input标签被选中后 后面的第一个label标签 */ input:checked+label { color:red; }:not(selector) 选择不满足selector的元素
/* p[class]:有class属性的p, p:not(p[class]):没有class的p标签*/ p:not(p[class]) { color:red; }E:nth-child(n) { css样式 } - n可以是数字，2n，2n-1，even奇数，odd偶数，具体看情况
/* tr:nth-child(2)：将指定的第几个tr标签 */ tr:nth-child(even) { background-color: red; }注意：CSS3出现了伪元素选择器
::first-letter 选择指定元素的第一个单词
/* p::first-letter:将p的第一个字符选中 */ p::first-letter { color: red; }::first-line 选择指定元素的第一行
/* div::first-line：将div里面第一行选中 */ div::first-line { background-color: lime; }::after 在指定元素的内容前面插入内容
/* p:nth-child(1):选中第一个p标签，::before：在p标签的开始插入内容 */ p:nth-child(1)::before { content: "哈哈"; 可以插图片 }::before 在指定元素的内容后面插入内容
p:nth-child(even)::after { content: "哈哈哈"; }
- 组合选择器 组合多个元素
ul,.c1 选择所有 <ul>元素和class="c1"的元素
- 层次选择器 通过元素结构选择元素
ul li选择里面的所有元素；div > p选择所有直接子元素是元素；h1 + p选择紧跟在元素后紧挨着的元素； 就是跟h1同级的第一个标签空格：后代选择器，选择被div标签包裹的所有span标签 '>'：子代选择器，选择被div标签直接包裹的儿子，不会影响p标签中的span标签 '+'：兄弟选择器，选择div标签后面紧挨着的span标签，不会影响后续的兄弟标签，此标签只能影响后面的兄弟 div span{ font-weight: bolder; background: red; } div > span{ font-weight: bolder; background: red; } div + span{ font-weight: bolder; background: red; } // 例子子元素
子元素
"second">子元素的子元素
子元素的子元素
子元素
// 找到的是这个标签，1.因为他跟上面的div是同级的，2.他又是"second">下面的第一个子元素
文本样式
font-family 设置字体
font-family: Arial, sans-serif; - 电脑中的字体font-size 设置字体大小
font-size: 16px;font-weight 设置字体加粗
font-weight: bold;font-style 设置字体样式
font-style: italic;color 设置文本颜色
color: red;line-height 设置行高
line-height: 1.5;text-align 设置文本对齐方式
text-align: center;text-decoration 设置文本装饰
text-decoration: underline;text-transform 设置文本大小写转换
text-transform: uppercase;text-shadow 设置文本阴影
text-shadow: 1px 1px 2px #000000;itsource-源码时代
跑马灯标签
列表样式
列表样式主要是列表项样式：
list-style-type 属性用于控制列表中列表项标志的样式
list-style-image 属性可以用来替换列表项的标记
overflow属性
overflow属性规定当内容溢出元素框时如何处理，可能的取值为：
visible：内容不会被修剪，会呈现在元素框之外，为默认值
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是始终会显示滚动条以便查看其余的内容
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容overflow-x：hidden | scroll | auto
overflow-y：hidden | scroll | autodisplay属性
作用：display属性用于定义元素的布局方式和外观
none：让生成的元素根本没有框，该框及其内容不再显示，不占用文档中的空间
block块级：让行内元素（比如元素）表现得像块级元素一样，设置width、height有效，独占一行
inline行内：让块级元素（比如元素）表现得像内联或行内元素一样，设置width、height无效，一行可显示多个
inline-block行内块：设置width、height有效，一行可显示多个盒子模型
概念：描述一个元素在页面中占据的空间和位置
在CSS中认为所有的HTML标签都是一个盒子，这些盒子有以下内容：边框border、内容content、内边距padding（内容与边框的距离）、外边距margin（盒子与盒子之间的距离）
每个盒子都有：边界、边框、填充、内容四个属性。
宽度高度
行内标签无法设置宽度（width）和高度（height），块级元素可以,一般高度不需要设置，由内容撑高
边框border
边框：元素周围的边框线，可以设置边框线的样式、颜色和宽度等属性。通常用border属性来设置边框
.box { border: 1px solid #000; }border-radius 设置或检索对象使用圆角边框
注意：也可以设置某一边的边框样式
border-bottom-left-radius/border-top-right-radius - 设置某一边圆角 border-top/bottom/left/right-width - 设置或检索对象顶/底/左/右边样式内边距padding
内边距：元素内容区域和边框之间的距离，可以设置内边距的大小。通常用padding属性来设置内边距
.box { padding: 20px; }外边距margin
外边距：元素和其他元素之间的距离。可以设置外边距的大小和负值。通常用margin属性来设置外边距
.box { margin: 10px; }盒子阴影
box-shadow属性用于设置盒子的阴影用于设置盒子阴影
文档流
概念:CSS文档流指的是HTML文档中元素按照一个规定好的方式排列的过程。HTML提供了3中文档流规则：
普通流/文本流：文档中的元素默认显示规则
文档中的元素默认显示规则： 1. 从上到下，从左到右 2. 块级元素独占一行，行内元素不换行浮动流：设定元素向某一个方向倾斜浮动的方式排列元素
设定元素向某一个方向倾斜移动，用于做左右布局的 1. 脱离普通流或文本流，并且将它放置在包含框的左边或者右边 2. 元素浮动之后依旧位于包含框之内 3. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止 只要设置了浮动，就将盒子脱离了文本流。由于浮动框不在文本流中，所以文本流中的其它元素，表现出就像浮动框不存在一样，自动上移，占有浮动框的位置 1.float属性 如果需要指示框浮动在包含框的左边或者右边，我们可以通过 float 属性来实现。none left right 2.clear属性 浮动会对后面的元素造成影响,clear 属性定义了元素的哪边上不允许出现浮动元素定位流：直接定位元素在文档或在父元素中的位置，表现为漂浮在指定元素上方
position属性
static：静态定位也是普通流定位，元素位于文档流中，正常显示。忽略元素的top，bottom，left，right。为默认值
relative：相对定位，对象遵循普通流，相对于对象自己本身的原始位置。相对定位是相对于它原来的位置进行偏移，具体的位置由偏移属性（top、bottom、left、right）来设置，元素原来所占的空间仍保留。 1. 首先需要设置position属性的值为relative 2. 然后使用偏移属性left属性或者right属性设置水平方向的偏移量 3. 也可以使用偏移属性top属性或者bottom属性设置垂直方向的偏移量 4. 如果有多个相对定位，可以使用z-index设置层次关系absolute：绝对定位，对象脱离普通流，相当于浮动，浮了起来，相对于浏览器窗口或已经设置了定位的父元素
绝对定位是相对于浏览器窗口设置偏移（假如父元素没有设置定位），具体的位置由偏移属性（top、bottom、left、right）来设置。元素原来所占的空间不保留 1. 首先需要设置 position 属性的值为 absolute 2. 然后使用偏移属性left 属性或者right 属性设置水平方向的偏移量 3. 也可以使用偏移属性top 属性或者bottom 属性设置垂直方向的偏移量 4. 如果有多个绝对定位，可以使用z-index设置层次关系fixed：与absolute一致，相对于浏览器窗口。当出现滚动条时，对象不会随着滚动，通常用来做广告div
固定定位相对于浏览器窗口设置偏移，是指将元素的内容固定在页面的某个位置。脱离文本流，元素原来所占的空间不保留。当用户向下滚动页面时元素框并不随着移动，通常用来做广告div。 1. 首先需要设置position属性的值为fixed 2. 然后使用偏移属性left属性或者right属性设置水平方向的偏移量 3. 也可以使用偏移属性top属性或者bottom属性设置垂直方向的偏移量 4. 如果有多个固定定位，可以使用z-index设置层次关系绝对定位是相对于浏览器窗口设置偏移（假如父元素没有设置定位），具体的位置由偏移属性（top、bottom、left、right）来设置。元素原来所占的空间不保留 1. 首先需要设置 position 属性的值为 absolute 2. 然后使用偏移属性left 属性或者right 属性设置水平方向的偏移量 3. 也可以使用偏移属性top 属性或者bottom 属性设置垂直方向的偏移量 4. 如果有多个绝对定位，可以使用z-index设置层次关系fixed：与absolute一致，相对于浏览器窗口。当出现滚动条时，对象不会随着滚动，通常用来做广告div
固定定位相对于浏览器窗口设置偏移，是指将元素的内容固定在页面的某个位置。脱离文本流，元素原来所占的空间不保留。当用户向下滚动页面时元素框并不随着移动，通常用来做广告div。 1. 首先需要设置position属性的值为fixed 2. 然后使用偏移属性left属性或者right属性设置水平方向的偏移量 3. 也可以使用偏移属性top属性或者bottom属性设置垂直方向的偏移量 4. 如果有多个固定定位，可以使用z-index设置层次关系
