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;但如果不想指定哪个属性可以省略;