CSS

CSS： 1、什么是CSS？ 修饰页面、管理页面显示样式 2、3种样式： 1、内联样式（只能作用于自己） 2、内部样式（写起来不精简） 3、外部样式（用起来麻烦，看起来清晰，一个CSS文件可以被多次使用） 3、CSS特点： 1、继承性，p标签继承了body的CSS样式 2、重叠性，p标签的样式来源于父标签和自己 3、优先级 就近原则：如果没有父子标签嵌套，则是位置上的近，否则按照子类的 4、选择器：重要系数（☆☆☆☆） a、元素选择器：元素名 b、类选择器：元素具有class属性 . className c、元素名. className：class名为className的XX元素 d、id选择器：元素具有id属性  #id e、选择器组，分组选择器：h1，p，#id，.class f、派生选择器：h1  span -->  h1 里面的所有span元素 h1 > span  -->  h1里面的所有span子元素 g、伪类选择器：由于浏览器兼容问题，很少使用 常用：  :hover  :focus   5、CSS样式： 样式属性：color（字体颜色）、font-size（字体大小）、background-color（背景颜色）、 width、height、text-decoration（去掉超链接的下划线） a{ /*清除超链接默认样式*/ text-decoration:none; } Border《边框：border:2px solid red;》、font-family（字体）、 float（浮动）  /*去除列表前面的标记*/list-style-type:none; 样式属性: 值 边框： 宽高溢出：overflow：visible（默认值）：内容不会被剪切， 超出部分会继续向下显示（会显示在边框外）； hidden:多余部分会被剪切，并隐藏显示； scroll：会自动给元素添加滚动条，以显示多余部分；   门户网站政府网站--校园网 电商网站社交网站 视频网站招聘网站 ---> 模块，用哪些标签 盒子模型： margin：外边距 Border：边框 Padding：内边距 Content：内容 占地宽度： content：width+padding-left+padding-right+margin-left+margin-right+border*2   导航栏： float:left;  左对齐  align=”center”不起作用。   背景图片： /*设置背景图片*/ background-p_w_picpath:url('286111.jpg'); /*如果图片较小，则会默认图片会重复*/ background-repeat:no-repeat; /*设置图片固定*/ background-p_w_upload:fixed; /*用一条属性设置背景图片分量*/ background:url('286123.jpg') no-repeat fixed; background-position:center; 文本： /*缩进两个字符*/   text-indent:2em; /*1.6倍行间距*/   line-height:1.6em; Text-decoration  文本修饰   浮动： div  块元素 如果元素可以排满一行，则顺序排列，如果一行排不下，则移到下面 正常：所有元素顺序排列 但是：如果一行无法容纳所有元素，则移到下一行，但是有可能被“卡住”（前面元素太高）   /*设置鼠标样式*/  cursor:wait;   display: /*把元素变成块元素*/   display:block; /*隐藏元素*/   display:none; /*把元素变成行内元素*/   display:inline;   列表样式： list-style-type:none; list-style-p_w_picpath:url('add.png');给列表前加图标   定位： 相对定位：如果对一个元素进行相对定位，它将出现在它所在的位置上。 然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 绝对定位：绝对定位的元素的位置相对于最近的已定位祖先元素， 如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。 /*设置透明度*/   opacity:0.6;//CSS3特性 /*立体空间位置,大的在上面；值越大，离屏幕越近*/   z-index:150;深度 固定定位：position:fixed;   常用CSS属性、样式： 背景：图片、颜色 大小：宽、高 文本：缩进、行间距、字体大小 定位：相对、绝对、固定 浮动：float 列表：list-style-type    /    list-style-p_w_picpath 盒子：边框、外边距、内边距 字体：font-family 显示：块元素(div/li/p/hn)、行内元素(span/img/a)、隐藏显示（display）