CSS笔记

CSS--- ???1.简介 ???2.优势 ???3.网页中插入cssCSS介绍------- ???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-familyCSS背景属性----------- ???可以设置纯色为背景，也可以使用图像作为背景 ???属性 ???????????????描述 ???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-positionCSS列表属性----------- ???属性 ???????????????描述 ???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-imageCSS表格属性----------- ???表格属性可以改善表格的外观 ???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 ???noneCSS定位------- ???使元素通过设置偏移量定位到页面或其包含框的任何地方 ???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