CSS
---
1.简介
2.优势
3.网页中插入css
CSS介绍
-------
Cascading Style Sheets
网页中插入CSS的三种方法
-----------------------
1.链接式
2.嵌入式
3.行内样式
链接式
------
推荐方式
<link rel="stylesheet" type="text/css" href="index.css"/>
嵌入式
------
当单个文档需要特殊的样式时，建议使用<style>标签在文档头部定义样式表
行内样式
--------
当样式仅需要在一个元素上应用一次时，可以使用行内样式
会失去样式表“表现与内容分离的优势”
<p style="color:blue;font-size:20px">
行内样式
</p>
CSS语法
-------
一条CSS样式规则由选择器和一条或多条声明组成
选择器
1.标记名
2.自定义类名
3.自定义id
每条声明由属性和属性的值组成
h1 {
color:blue;
font-size:20px;
}
h1 { color: #0000ff; }
h1 { color: #00f; }
h1 { color: rgb(0,0,255); }
h1 { color: rgb(0%,0%,100%); }
基本CSS选择器
-------------
1.标记选择器
2.类选择器
3.id选择器
标记选择器
----------
标记是元素固有的属性，CSS标记选择器用来声明哪种标记采用哪种CSS样式，因此，每一种html标记的名称都可以作为相应的标记选择器的名称。
类选择器
--------
类选择器以半角“.”开头，且类名称的第一个字母不能为数字
id选择器
--------
id选择器的使用方法与class选择器基本相同，不同之处在于一个id选择器只能应用于html文档中的一个元素，因此其针对性更强，而class选择器可以应用于多个元素。
id选择器以半角“#”开头，且id名称的第一个字母不能为数字
CSS文本属性
-----------
定义文本外观，文本颜色，字符间距，对齐文本，装饰文本，文本缩进
属性 描述
color 文本颜色(所有浏览器都支持 color 属性)
text-align 文本水平对齐方式
text-decoration 添加到文本的装饰效果
text-indent 规定文本块首行缩进
line-height 设置行高
text-transform 控制文本大小写
letter-spacing 设置字符间距
word-spacing 设置单词间距
color属性
---------
值 描述
color_name 颜色名称red
hex_number 十六进制值#ff0000
rgb_number rgb颜色rgb(255,0,0)
inherit 继承父元素
text-align属性
--------------
水平对齐方式(默认值由浏览器决定)
值 描述
left 左对齐
right
center
justify 两端对齐
inherit 继承父元素
text-decoration属性
-------------------
设置文本的上划线，下划线，删除线等
值 描述
none 默认。标准文本
underline 下划线
overline 上划线
line-through 删除线
inherit 继承父元素
text-indent属性
---------------
文本的首行缩进text-indent: 2em;(20px, 50%)
值 描述
length 定义固定的缩进，默认值为0
百分比 定义基于父元素的百分比缩进
inherit 继承父元素
text-line-height属性
--------------------
设置行间的距离(行高)
值 描述
normal 默认行高
% 基于当前字体尺寸的百分比行间距
length 使用像素值设置行间距
number 使用数值设置行间距
inherit 继承父元素
text-transform属性
------------------
控制文本大小写
值 描述
none 默认
uppercase 设置文本中所有字母为大写
lowercase 小写
capitalize 首字母大写
inherit 继承父元素
text-letter-spacing属性
-----------------------
值 描述
normal 默认
length 定义字符间默认的固定距离(可以为负值)
inherit 继承父元素
<p style="letter-spacing:-0.2em;">Huaiyin institute of technology</p>
<p style="letter-spacing:1em;">Huaiyin institute of technology</p>
<p style="letter-spacing:20px;">Huaiyin institute of technology</p>
text-word-spacing属性
-----------------------
值 描述
normal 默认
length 定义单词间默认的固定距离(可以为负值)
inherit 继承父元素
CSS字体属性
-----------
定义文本字体系列，大小，加粗，风格，变形
属性 描述
font-family 字体
font-size 字体尺寸
font-weight 字体粗细
font-style 字体样式
font 可以设置字体的所有属性
font-size属性
-------------
设置文本大小
值 描述
xx-small
x-small
small
medium 从xx-small到xx-large, 默认值为medium
large
x-large
xx-large
smaller 比父元素更小的尺寸
larger 比父元素更大的元素
length 设置为一个固定值
% 设置为基于父元素的一个百分比值
inherit 继承父元素
font-weight属性
---------------
设置文本粗细
值 描述
normal 默认值，定义标准字符
bold 粗体
bolder 更粗
lighter 更细
100
200
300
400 定义由细到粗的字符400等同于normal, 700等同于bold
500
600
700
800
900
inherit 继承父元素
font-style属性
--------------
设置文本是否倾斜
值 描述
normal 不倾斜
italic 倾斜
font属性
--------
一次性设置针对字体的属性
按照如下顺序：font-style font-weight font-size/line-height font-family
CSS背景属性
-----------
可以设置纯色为背景，也可以使用图像作为背景
属性 描述
background-color 设置元素的背景颜色
background-image 设置元素的背景图片
background-repeat 设置是否重复背景图像或如何重复背景图片
background-position 设置背景图片开始位置
background-attachment设置背景图片是否固定或者随着页面其余部分滚动
background 设置背景的所有属性
background-color属性
--------------------
用于设置对象的背景色
值 描述
color_name 颜色值为颜色名称的背景颜色red
hex_number 颜色值为16进制的背景颜色#ff0000
rgb_number 颜色值为rgb代码的背景颜色rgb(255,0,0)
inherit 继承父元素
background-color属性
--------------------
设置背景图像
元素的背景占据元素的全部尺寸，包括内边距和边框，但不包括外边框
默认情况背景图片位于元素左上角，并在水平和垂直方向上重复
<div style="background-image:url(xxx.jpg/png/gif)"; height:150px; width:800px;></div>
background-repeat属性
---------------------
设置是否及如何重复背景图像
值 描述
repeat 默认。背景图片在垂直和水平方向上重复
repeat-x 仅在水平方向上重复
repeat-y 仅在垂直方向的重复
no-repeat 图像仅显示一次
inherit 继承父元素
background-position属性
-----------------------
设置背景图像的起始位置
值 描述
top left 如果仅设置了一个关键词，那么第二个值将是“center”
top center 默认值：0% 0%
top right
center left
center center
center ritht
bottom left
bottom center
bottom right
x% y% 第一个值是水平位置，第二个值是垂直位置
左上角是0% 0% 右下角是100% 100%
如果仅规定一个值，另一个值将是50%
xpos ypos 第一个值是水平位置，第二个值是垂直位置
左上角是0, 0。单位是像素(0px, 0px)或其他CSS单位
如果仅规定一个值另一个将是50%
可以混合使用%和position值
backgroun-attachment属性
------------------------
设置背景图像是否固定或者随着页面的其余部分滚动
值 描述
scroll 默认值。背景图像会随着页面其余部分的滚动而移动
fixed 当页面其余部分滚动时背景图片不会移动
inherit 继承父元素
background属性
--------------
一次性设置针对背景的属性
顺序：background-color background-image background-repeat background-attachment background-position
CSS列表属性
-----------
属性 描述
list-style-type 设置列表项标记的类型
list-style-position 设置列表项标记的位置
list-style-image 将图像设置为列表项标记
list-style 设置列表项的所有属性
list-style-type属性
-------------------
用于设置列表项的类型
值 描述
none 无标记
disc 默认。标记是实心圆
circle 标记是空心圆
square 标记是实心方块
decimal 标记是数字
decimal-leading-zero 0开头的数字标记01 02 03
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
lower-greek 小写希腊字母
lower-latin 小写拉丁字母
upper-latin 大写拉丁字母
list-style-position属性
-----------------------
设置列表标记的位置
值 描述
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inherit 继承父元素
list-style-image属性
--------------------
将列表标记设置为图像
list-style-image:url(1.png);
list-style属性
--------------
设置关于列表的所有属性
顺序：list-style-type list-style-position list-style-image
CSS表格属性
-----------
表格属性可以改善表格的外观
1.边框border属性(border:1px solid blue;)
2.单线条边框border-collapse(border-collapse:collapse;)
3.宽度和高度width height(height:10px; width:75%;)
4.文本对齐方式text-align vertical-align(text-align:center;)
5.控制内容与边框的距离padding(padding:9px;)
6.制作隔行变色表格
7.设置表格标题的位置coption-side(caption{caption-side:bottom;})
CSS单位
-------
单位 描述
% 百分比
in 英寸
cm 厘米
mm 毫米
em
1em 等于当前的字体尺寸。
2em 等于当前字体尺寸的两倍。
例如，如果某元素以 12pt 显示，那么 2em 是24pt。
在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)
颜色
单位 描述
(颜色名) 颜色名称 (如 red)
rgb(x,x,x) RGB 值 (如 rgb(255,0,0))
rgb(x%, x%, x%) RGB 百分比值 (如 rgb(100%,0%,0%))
#rrggbb 十六进制数 (如 #ff0000)
CSS的两个特性：层叠性和继承性
-----------------------------
层叠性
当有多个选择器都作用于同一元素时，即多个选择器的作用范围发生了重叠
1.如果多个选择器的定义的规则不发生冲突，则元素将应用所有选择器定义的样式
2.如果多个选择器定义的规则发生了冲突，则CSS按选择器的优先级让元素应用优先级高的选择器定义的样式。
CSS规定选择器的优先级从高到低为：行内样式 > ID样式 > 类别样式 > 标记样式。总的原则是：越特殊的样式，优先级越高。
继承性
CSS的继承性是指如果子元素定义的样式没有和父元素的样式发生冲突，那么子元素将继承父元素的样式风格，并可以在父元素的基础上再加以修改，自己定义新的样式，而子元素的样式风格不会影响父元素
一般是CSS的文本属性具有继承性，而其他属性(背景属性，盒子属性等)则不具有继承性
具有继承性的属性：color,font-类,text-indent,text-align,teext-decoration,line-height,letter-spacing,border-collapse等
无继承性的属性：text-decoration:none，所有背景属性，所有盒子属性，布局属性等
CSS选择器的组合
---------------
1.交集选择器
2.并集选择器
3.后代选择器
1.交集选择器
------------
交集选择器是由两个选择器直接连接构成，其结果是选中两者各自作用范围的交集
其中第一个必须是标记选择器，第二个必须是类选择器或id选择器。如:h1.class p#intro。这两个选择器之间不能有空格
2.并集选择器
------------
并集选择器是对多个选择器进行集体声明，多个选择器之间用","隔开(h1,h2,.class)
所有元素使用通配符*
3.后代选择器
------------
在后代选择器中，规定左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为"...在...找到", "...作为...的后代"
ul li选择器可以解释为"作为ul元素后代的任何li元素", "包含li的所有ul会把以下样式应用到该li"
写法:把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。
不仅标记选择器可以用这种方式组合，类选择器和ID选择器也都可以进行嵌套，而且后代选择器还能够进行多层嵌套。
两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
CSS常用的伪类与伪元素
---------------------
CSS伪类用于向某些选择器添加特殊的效果，伪元素用于向某些选择器设置特殊效果，常用的伪类和伪元素主要有
伪类
----
属性 描述
:link 超链接正在浏览状态时的样子
:visited 被单击过的链接的样式
:hover 悬停风格
:active 鼠标单击与释放之间
:first-child 向元素第一个元素添加样式
伪元素
------
:first-letter 向元素的第一个字母添加样式
:first-line 向文本的首行添加样式
CSS盒子模型
-----------
盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。
页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、内边距、边框和外边距。组成。
网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成
每个HTML元素都可以看作是一个装了东西的盒子；
盒子里面的内容到盒子的边框之间的距离即内边距(padding),盒子本身的边框(border),而盒子边框外和其它盒子之间的外边距(magin),
默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子
提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
CSS边框属性
-----------
元素的边框(border)是围绕元素内容和内边距的一条或多条线
属性 描述
border 简写属性，在一个声明中设置所有的边框属性
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独为各边边框设置宽度
border-style 简写属性，用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-color 简写属性，用于设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色
border-top 简写属性，在一个声明中设置所有的上边框属性
border-top-width
border-top-style
border-top-color
border-right
...
border-bottom
...
border-left
...
1.在一个声明中设置所有的边框属性
--------------------------------
宽度，样式，颜色
2.设置4条边框的宽度
-------------------
border-width简写属性，为元素的所有边框设置宽度，或者单独为各边设置宽度
值 描述
thin 定义细的边框
medium 默认。定义中等的边框
thick 定义粗的边框
length 自定义宽度
inherit 继承父元素
1.1个属性值，表示4条边框的属性(border-width:thin;)
2.2个属性值，value1上下边框，value左右边框
3.3个属性值，value1上边框，value2左右边框，value3表示下边框
4.4个属性值，上，右，下，左，顺时针
3.设置4条边的样式
-----------------
border-style简写属性为元素的所有边框设置样式，或单独为各边边框设置样式
值 描述
none 无边框
hidden 与"none"相同。不过应用于表时除外，对于表，hidden用于解决边框冲突
dotted 点状边框。多数浏览器呈现实线
dashed 虚线。多数浏览器呈现实线
solid 实线
double 双线
groove 3D凹槽边框
ridge 3D垄状边框
inset 3Dinset边框
outset 3Doutset边框
inherit 继承父元素
简写形式与上述border-width规则类似
4.设置四条边框的颜色
--------------------
border-color简写属性为元素的所有边框设置颜色，或者单独为各边边框设置颜色
5.设置上边框的属性
------------------
border-top简写属性，在一个声明中依次设置上边框的宽度，样式和颜色
CSS内边距属性
-------------
盒子的内边距就是盒子边框到内容之间的距离，和表格的填充属性celladding相似。如果填充属性为0，则盒子的边框会紧挨着内容
当对盒子设置了背景颜色或背景图像后，那么背景会覆盖padding和内容组成的范围，并默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的
属性 描述
padding 设置所有内边距的属性
padding-top 上编剧
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
可以在一个声明中按照上、右、下、左的顺序分别设置各边的内边距属性
也可以通过下面四个单独的属性padding-top、padding-right、padding-bottom以及padding-left分别设置上、右、下、左内边距：
CSS外边距margin
---------
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的空白
属性 描述
margin 在一个声明中设置所有外边距属性
margin-top 上外边距
margin-right
margin-bottom
margin-left
可以在一个声明中按照上、右、下、左的顺序分别设置各边的外边距属性
也可以通过下面四个单独的属性margin-top、margin-right、margin-bottom以及margin-left分别设置上、右、下、左外边距：
CSS外边距合并
-------------
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
CSS的三种定位形式
-----------------
1.普通流
2.浮动
3.绝对定位
普通流
------
除非专门指定，否则所有框都在普通流中定位。
普通流定位方式：
1.行内元素在同一行内横向排列。
行内元素(inline)是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行。 行内元素举例：a，img，font，b，i，u， span，input
2.块级元素占满整个一行，在页面中竖向排列。
块级元素(block)是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。 块级元素举例：p, div, hn, pre, hr, ul, ol, li, form
3.对于嵌套的元素盒子也是嵌套的关系
通过display属性可以控制元素是以行内元素显示还是以块级元素显示，或是不显示
block
若display的属性设为block，则元素总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非用width设定一个宽度
inline
若display的属性设为inline，则元素和其他元素都在一行上，高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。
none
若display的属性设为none，该元素被设置为隐藏，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。如制作下拉菜单、tab面板等有时就需要用 display: none把菜单或面板隐藏起来
list-item
在html中只有li元素默认是 list-item ，将元素设置为列表项元素后将按列表元素显示，再通过设置列表选项可使元素的左边出现小黑点。
CSS浮动
-------
在普通流中，一个块级元素在水平方向会自动延展，在它的父元素中占满一行，而在竖直方向和其他元素依次排列，不能并排
float属性
---------
值 描述
none 默认值
left 向其父元素的左侧靠近，盒子的宽度不再延伸，而是收缩，在没设置宽度时会根据盒子的内容来确定宽度
right
浮动后的盒子将以块级元素显示，但宽度不会自动延伸
浮动的盒子将脱离普通流，即不再占据浏览器原来分配的位置
"脱离普通流"是指元素不再占据在普通流下浏览器分配给他的空间，其他元素就好像这个元素不存在一样
未浮动的盒子将占据浮动盒子的位置，同时未浮动的盒子内的内容会环绕浮动后的盒子
多个盒子都浮动后，就产生了块级元素水平排列的效果
多个浮动元素不会相互覆盖，一个浮动元素的外边界margin碰到另一个浮动元素的外边界后便停止运动
浮动的清除
----------
clear是清除浮动属性
值 描述
left 不允许左浮动
right
both
none
CSS定位
-------
使元素通过设置偏移量定位到页面或其包含框的任何地方
position
值 描述
static 默认值。表示不使用定位属性
fixed 固定定位，它和绝对定位类似，只是总是以浏览器窗口为基准进行定位(不常用)
relative 使用相对定位的盒子的位置定位依据常以标准流的排版方式为基础，然后使盒子相对于它在原来的标准位置偏移指定的距离
absolute 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块
相对定位的作用
--------------
让元素相对它原来的位置发生位移，同时不释放它原来占据的位置
让元素的子元素以他为定位基准进行定位，同时保持他的位置不变，这时相对定位的元素成为包含框，一般是帮助里面的元素进行绝对定位
CSS绝对定位
-----------
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块
元素原先在正常文档流中所占的空间会自动关闭，就好像该元素原来不存在一样
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于他在普通流中的位置。
若不设置父标记的定位属性为relative，则绝对定位的元素默认以浏览器为包含框按照left和top设置的值偏移
相对定位和绝对定位的比较
relative absolute
定位基准 以自己原来的位置为基准 以距离它最近的设置了定位属性的父级元素为定位基准，若所有父级元素都未设置定位则以浏览器窗口为基准
原来的位置 还占着原来的位置，为脱离普通流 不占用其原来的位置，已经脱离普通流，其他元素就当它不存在
cursor常用属性
--------------
值 描述
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）
Crosshair
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
扫一扫
1164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
