CSS的基本样式

CSS的基础样式

字体样式：

font-family 字体类型：隶书”  “楷体”     其他（电脑中已有才能使用）

font-size    字体大小：像素：px

font-weight字体粗细：bold 定义粗体字符（100-900 定义由细到粗的字符）

font-style   字体风格： normal   默认值，标准文档样式；   italic       斜体

font            字体属性：字体风格 字体粗细 字体大小 字体类型（样式顺序不能变）

p{
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";   /*字体，把范围大的字体放后面，防止前面的字体某些浏览器没有。如果字体带空格，要引起来 */
    font-size: 20px;   /*字号*/
    color: red;  /*字体颜色*/
    font-style: italic;  /*字体样式*/
    font-weight: bold  /*字体粗细*/    
}

 文本样式：

color              设置文本颜色：red    #362596    rgb(32,250,50)      （三种颜色表达方式）

text-align       设置元素水平对齐方式：  left    center     right        （左对齐 居中 右对齐）

text-indent           设置首行文本的缩进

line-height           设置文本的行高

text-decoration设置文本的装饰 ：none:默认，标准文本； underline：定义文本下划线；

overline    ：定义文本上划线； line-through：定义穿过文本的一条线。

p{
    text-align: left;   /*文本的对齐方式*/

    text-decoration-line:underline;  /*文本装饰*/
    /*也可以这样来设置  text-decoration: underline;  */
    text-decoration-style:solid;  /*默认就是单实线*/
    text-decoration-color: red; /*线颜色*/
    
    text-transform: capitalize;  /*大小写转换，每个单词的首字母都大写*/
    
    text-indent: 40px;   /*首行缩进*/
    
    letter-spacing: 2px;  /*字符间距*/
    word-spacing: 10px;  /*单词间距*/
    
    line-height: 150%;  /*行高（行间距）*/
    
    word-break: break-word  /*自动换行时换行处的字符处理，break-word是以单词进行切分，保持单词的完整，break-all是以单个字符进行切分*/
}

背景样式：

背景颜色background-color           ： red    #536256    rgb(30,250,13) （用一种即可）

背景重复方式background-repeat ：no-repeat不重复；repeat-x 水平重复repeat-y垂直重复；repeat 默认重复。

背景图片地址background-image  :   url(图片路径)：图片绝对路径 图片相对路径。

背景定位background-position      ：像素：px；

 水平方向：left、center、right ；垂直方向：top、center、bottom。

背景样式简写background             ：图片地址，图片重复方式，背景颜色，背景定位：网页开发中比较常用 属性值之间没有先后顺序。

body{
    background-color: red;  /*背景颜色*/

    background-image: url("bg.png"); /*背景图片，url()中的路径可引可不引。可以设置多个url()，逗号隔开即可*/
    background-repeat:no-repeat;  /*背景填充*/
    background-position: left;  /*背景图片的位置，这个属性需要和background-repeat: no-repeat搭配使用*/
    background-attachment:fixed;  /*背景图片是否随内容的上下滚动而滚动*/
    background-size:80px 60px;  /*设置背景图片的尺寸，可使用百分比*/
    
    
	/* 可以写成一句 */
　　background: url("bg.png") no-repeat fixed left;
}

边框样式： 

	/*同时设置4条边线*/
    border: 1px red solid;   

    /*分开设置4条边线的线宽、线型、线颜色*/
    border-width: 1px;
    border-style: sold;
    border-color: red;


    /*设置1条边线，默认没有边线，可以用此来实现分隔线*/
    border-bottom: 1px red solid; 

    /*分开设置1条边线的线宽、线型、线颜色*/
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: red;

边框颜色：

border-top-color                                                   上边框颜色

border-right-color                                                 右边框颜色

border-bottom-color                                             下边框颜色

border-left-color                                                    左边框颜色

border-color                                                      边框颜色简写

边框粗细：

border-top-width                                                         上边框粗细

border-right-width                                                       右边框粗细

border-bottom-width                                                   下边框粗细

border-left-width                                                         左边框粗细

border-width                                                                         简写

 padding、margin：

margin的设置方式和padding相同。

属性值优先级：
css样式 > html属性 > 浏览器默认值

div{
    /*分别设置4个内边距*/
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    padding: 10px 20px 10px 20px;  /*顶右底左*/
    padding:10px 20px;   /*参数不全时，默认取对边的值，顶=底，左=右*/
    padding: 10px;  /*4个都是10px*/
}

div{
    /*分别设置4个内外边距*/
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;

    margin: 10px 20px 10px 20px;  /*顶右底左*/
    margin:10px 20px;   /*参数不全时，默认取对边的值，顶=底，左=右*/
    margin: 10px;  /*4个都是10px*/
}

盒子模型：

元素 = content（内容）+ padding+border

width、height可以用px，也可以使用百分数（占父容器宽高的百分比）

width、hight指的是content的宽、高。

鼠标样式：

defalut  默认光标 ；pointer 超链接指针；wait 等待状态；help 指示可用的帮助；

text       指示文档；crosshair 鼠标呈现十字状。

元素的显示方式：

行内元素的宽高根据内容自动确定，只有极少数的行内元素可以手动设置width、height，比如img。

块级、行内元素均可设置margin、padding。

div{
    display: none;  /*不显示元素，不再占据空间*/
    display: block;  /*作为块级元素显示，前后自动换行，可设置width、height*/
    display: inline;  /*作为行内元素显示，前后不自动换行，不能设置width、height（设置了无效）*/
    display: inline-block; /*行内块方式显示，前后不会自动换行，但可以设置width、height*/
}

浮动：

行内、块级元素均可浮动，浮动是在父容器中浮动，左浮动向左，右浮动向右，直到碰到一个兄弟元素的边缘或达到父容器的边界。

浮动后，周围元素的排列会改变，相邻的不浮动元素会受到影响，相邻的不浮动元素可使用clear清除浮动元素对自己造成的影响。

div{
    float:left; /*向左浮动*/
    float:right; /*向右浮动*/
 }


/* 清除浮动 */
.clear{
     clear:left;  /* 如果此元素的左边有相邻的浮动元素，会重起一行来显示此元素 */
     clear:right;  /* 如果此元素的右边有相邻的浮动元素，会重起一行来显示右边的浮动元素 */
     clear:both;  /* left+right */
 }

 元素定位：

position 属性：

static     ：    默认值，没有定位 元素会以标准文档输出。 

relative  ：相对定位 

absolute：绝对定位

fixed      ：固定定位

div {
	/* static  默认值，正常的文档流显示方式 */
	position: static;  /*使用static时，left、right、bottom、top无效  */

	
	/* relative 相对定位，相对于正常位置定位 */
    position:relative; 
    left:50px;  /*距原来位置左侧50px*/
    top:20px;  /*距原来位置顶端20px*/

	
	/* 
	绝对定位，绝对定位是一种特殊的相对定位，相对于关系最近的已定位的祖先元素（父亲、爷爷、...）定位，
	已定位指的是使用static之外的方式定位，
	如果没有已定位的祖先元素，则相对于<html>（整个页面的顶|底边界、左|右边界）定位。
	*/
	position:absolute;
    left:50px;  
    top:20px;


	/* 以上三种方式，元素均会随着页面的上下滚动而移动 */


	/* 
	相对于浏览器窗口（顶部、左|右边界）定位，顶部指的是书签栏下面。
	一直固定在指定位置，不随页面的滚动而移动
	*/
	position:fixed; 
    left:50px;  
    top:20px;
}

position 属性小结 ：

一、fixed 固定定位
                (1) 使用了固定定位的元素【会】 脱离标准文档流。
                (2) 基于 浏览器窗口 进行偏移。
                (3) 所有定位元素都基于 top、left、right、bottom四个方位进行偏移。

 二、relative 相对定位
                (1) 使用了相对定位的元素【不会】 脱离标准文档流。
                (2) 基于 自身原来在网页中的位置 进行偏移。
                (3) 所有定位元素都基于 top、left、right、bottom四个方位进行偏移。

 三、absolute 绝对定位
                (1) 使用了绝对定位的元素【会】 脱离标准文档流。
                (2) 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。
                (3) 所有定位元素都基于 top、left、right、bottom四个方位进行偏移。

列表样式：

list-style-type：（1）无序列表：disc 实体圆心（默认）；circle 空心圆；square 实体方心 none无列表标记。

（2）有序列表： 

list-style-image：自定义列表标记为图片            属性值：url(图片路径)。

list-style-position：列表标记定位    outside    inside。

列表样式简写list-style：列表标记属性 自定义列表标记图片 列表标记定位。

CSS伪类：

link：单击访问前

visited：单击访问后

hover：鼠标悬浮其上

active：单击未释放

用于向某些选择器添加特殊的效果，伪类通常是动态产生的，临时的，并非常驻属性。

CSS高级选择器：

 并集选择器：多个选择器通过逗号连接而成。

交集选择器  ： 由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格。第一个必须是标签选择器，第二个必须是类选择器或者ID选择器。

后代选择器： 外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔 。标签嵌套时，内层的标签成为外层标签的后代，且使用标签选择器、id选择器、类选择没有先后顺序。

子元素选择器： 通过  >  连接在一起而成，仅作用于子元素。

属性选择器： 选取带有指定属性的元素，选取带有指定属性和值的元素。