Web学习之CSS基础

css基础

1.

<link href="css/1.css" type="text/css" rel="stylesheet">

link元素告诉浏览器在何处寻找用于定义页面样式的css文件，属性值：href表明css文件的路径，type表明页面所链接文档的类型。它的值是text/css
,rel表明html页面与被链接文件的关系。当链接到一个css文件时，该特性的值应该为stylesheet。

2.

<style type="text/css">##</style>

style:使用type特性来表明这些样式是在css中指定的，特性值为text/css。

3.选择器分类

• 通用选择器：应用于文档中的所有元素，例如*｛｝；
• 类型选择器：匹配元素名称与选择器相同的元素，例如h1,h2,h3｛｝；
• 类选择器：匹配这样的元素：元素的class特性的值与此选择器点符号后面的部分相同，例如.note{},p.note{}；
• id选择器:匹配的元素：元素的id特性的值与此选择器#号后面的部分,例如：#introduction{}；
• 子元素选择器：匹配指定元素的直接子元素，例如：li>a{}； 后代选择器：匹配指定元素的后代元素，例如：p，a{},应用于所有位于p元素中的a元素；
• 相邻兄弟选择器：匹配一个元素的相邻的兄弟元素，例如：h1+p{}应用于h1yuansu后的第一个p元素；

5.css级联规则：

• 就近原则：如果两个选择器完全相同，那么后出现的选择器优先级越高
• 具体性原则：如果一个选择器比其他选择器更具体，那么具体的选择器优先于一般的选择器 例如：h1比*具体，p b比p具体，p#intro比p具体；

重要性：可以在任意属性值的后面添加!important来强调这条规则比应用于同一元素的其他规则更重要
如果在body元素上指定了font-family属性或color属性，那么它们将应用于body元素的大多数子元素上。
这是因为font-family属性的值被这些子元素所继承。

6.前景色color：指定元素文本颜色

• 颜色指定方法：rgb值：组成一种颜色分贝需要多少红色，绿色，蓝色的角度来表示颜色。例如：rgb(100,100,90)。
• 十六进制编码表示法：这种方式通过6位十六进制编码表示颜色，其中的六位编码（没两位构成一个值，共三个值）分别表示一种颜色中红，绿，蓝的数量，前面加一#号例如：#ee3e80
• 颜色名称表示法：浏览器可以识别147种预定义的颜色名称。例如：DarkCyan,

  background-color:背景色；

opacity:允许你指定元素及其子元素的透明度在0.0到1.0之间；rgba也可以同上面；
hsl颜色属性以hsl开头位于其后的括号内是以下几个值：

• 色调：通过介于0度到360度组件的一个角度表示
• 饱和度：通过百分数表示
• 明度：通过百分数表示，0%表示黑色，50%表示标准色，100%表示白色
• hsla就相应的增加了透明度；

7.font-family属性允许你为这些元素中的任意文本指定字体；

• font-size:字体大小；
• font-weight:粗体
• normal:普通粗细显示
• bold:粗体显示；
• font-style:斜体，
• normal:普通字体显示，
• italic:文本以斜体显示，
• oblique:文本倾斜显示；
• text-transform:为uppercase:文本大写，lowercase:文本小写，capitalize:每个单词首字母大写；
• text-decoration:none:该值会把应用在文本上的装饰线删除，underline：文本底部添加一条实线，overline:文本顶部添加一条实线
• line-through:一条实线穿过文字，blink：使文本动态闪烁；

8.line-height:行间距最好设置在1.4em-1.5em之间以增加可读性；
letter-spacing:字母间距；
word-spacing:单词间距；
text-align:对齐方式；
left:左对齐；
right：右对齐；
center:居中显示;
justify:文本两端对齐；
text-indent:首行文本缩进；

9.

text-shadow:-1px -1px #666666;

• text-shadow:投影第一个值：阴影向左或向右延伸的距离
• 第二个值：阴影向上或向下延伸的距离；
• 第三个值：投影的模糊程度；

first-letter:指定首个字母；first-line：指定首行文本；

10.盒子
min-width:最小宽度，max-width：最大宽度，高度也同理；
overflow:超出盒子部分的处理为hidden：溢出部分隐藏**；scroll**:增加滚动条；
border-width:边框宽度分别对应于上右下左；

11.border-style:边框样式:

• solid:一条实线；
• dotted:一串方形点；
• dashed：一条虚线
• double:两条实线
• groove:显示为雕入页面效果；
• ridge:页面凸起效果；
• inset:嵌入页面效果 ；
• outset:凸出屏幕效果；

border-color:边框颜色，也遵循上右下左；
border快捷方式如

border:3px dotted #0088dd；

12.padding:内边距，margin：外边距

13.要让盒子居中显示可以使它的left-margin与right-margin设置为auto；

14.display:允许你讲一个内联元素转换为一个块级元素，反之亦然，而且该属性还可以用于从页面上隐藏元素
inline:可以使一个块级元素表现的像一个内联元素；
block:可以使一个内联元素表现得像一个块级元素
inline-block：使一个块级元素像内联元素那样浮动并保持其他的块级元素特征
none:将一个元素从页面隐藏；
visibility:允许从用户的视线中隐藏盒子: hidden:隐藏；visible：可见；

15.list-style-type:允许控制项目符号的形状，无序列表（ul）中

• disc:实心圆，
• circle:空心圆，
• square：正方形

有序列表（ol）中

• decimal:1 2 3；
• decimal-leading-zero:01 02 03;
• lower-alpha:a b c;
• upper-alpha:A B C；

list-style-image:项目图片；
list-style-position:标记的定位，是在包含主体内容的盒子的内部还是外部
outside:标记位于文本块的左侧；
inside:标记位于文本块的内部，同时文本块会被缩进；
列表快捷方式：list-style;例如

list-style:inside circle；

16.表格
width:表格宽度；
padding:设置每个单元格边框与其内容之间的空隙；
text-transform:用于将表格标题中的内容转换为大写
letter-spacing,font-size:用于为表格标题的内容增加额外的样式；
border-topborder-bottom:用于设置表格标题上方和下放的边框
text-align:单元格书写方式左对齐还是右对齐；
:hover在用户吧光标悬停在某个表格行时此行高亮显示；

17.empty-cells:指定空单元格显示不显示:

• show:显示；
• hide:隐藏；
• inherit：如果一个表格嵌套于另外一个表格则遵循外部表格；

border-spacing:控制单元格组件的间隙；
border-collapse:合并相邻的边框；

18.cursor:控制显示给用户的光标类型（光标悬停处）例如:auto,crosshair,default,pointer,move,text,wait,help,url("#.gif）；

19.position:relative指定元素相对定位，top和bottom分别表示向上或向下移动，left和right分别指定向左，向右移动；
position:absolute绝对定位，不受页面影响，其它同相对定位；
position：fixed固定定位，元素相对于浏览器窗口的定位，滚动页面时，这类元素保持不变；
z-index:当盒子重叠时可以通过定义z-index属性值确定他们的优先级；

20.float:浮动，left,right分别对应左右浮动；

21.background-image:url("#")背景图像设置；
background-repeat: repeat:水平竖直平铺；
repeat-x:水平平铺；
repeat-y:竖直平铺；
no-repeat:背景图像只显示一次
background-attachment:fixed:背景固定在页面中；scroll:背景图像随用户上下滚动页面而剩下移动；

background-position:right top;

其中第一个值是水平方向（left,right,center），
第二个值为竖直方向(top,bottom)
也可用百分数表示

background-position:50% 50%

表示水平竖直居中；
background可简化要按照下面属性顺序写color,image.repeat.attachment.position;但如果不想指定哪个属性可以省略；