目录

前端04 /css样式

昨日内容回顾

• css引入

内联:    
    
内部:    head标签中的style标签中写外部文件引入    
    

• 选择器

• 基础选择器

元素选择器类选择器id选择器

• 组合选择器

后代选择器 div p儿子选择器 div>p毗邻选择器 div+p弟弟选择器 div~p组合选择器 div,pdiv.c1{xx:xx};  过滤,找到有c1类值的div标签div .c1  找后代,找到div标签后代中有类值为c1的所有标签示例    
        
        
            
    
     div1    
     span1
    
    
     div2
    
    
     div3
    

• 属性选择器

    
[xxx]{}[xxx='ooo']{}div[xxx]div[xxx='ooo']

• 伪类选择器

a:link{}  a:active{}a:visited{}a:hover{}input:focus{}

• 伪元素选择器

first-letterbeforeafter

继承

• 优先级(权重)

div{color:red!important;} 最高级别

• 通用选择器

*{color:red;}

css样式

1高度宽度

width宽度height高度    块级标签能设置高度宽度,内联标签不能设置高度宽度,内敛标签的高度宽度由标签内部的内容来决定.示例    
            
    
     div1
    
span1

2字体属性

字体font-family:'宋体','楷体'...字体大小font-family: '楷体','黑体';  /* 字体,从左往右找浏览器能够支持的字体 */font-size: 10px;           /* 设置字体大小,默认字体大小是16px */字重font-weight:bold;加粗字体颜色/*color:red;*//*color: #668B8B;  *//*color: rgb(255, 170, 205);*/

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

示例：

    
            
    
         明月几时有,把酒问青天.
    
    不知天上宫阙,今夕是何年.

3文本属性

• 文本对齐

  水平方向对齐

text-align: center;text-align: right;text-align: left;

text-align 属性规定元素中的文本的水平对齐方式。（letter-spacing）

值	描述
left	左边对齐 默认值
right	右对齐
center	居中对齐

垂直对齐

line-height:200px;

示例代码：

    
            
    
    
             xxxxx    
    

• 文本装饰

text-decoration: none;text-decoration: overline;百度示例a{    text-decoration: none;}

text-decoration 属性用来给文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

• 首行缩进

p{    text-indent: 32px;}p{    text-indent: 2em;}

示例代码:

    
        
        
            
    
         唧唧复唧唧,木兰当户织.
    
百度
    唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.唧唧复唧唧,木兰当户织.

4背景属性

/*background-color: blue;*/ /* 设置背景颜色 */background-image: url("meinv.jpg");  /* 背景图片,url属性值为图片路径 */background-repeat: no-repeat; /* 图片是否平铺,默认是平铺的,占满整个标签 *//*background-position: right bottom; !* 图片位置 *!*//*background-position: 100px 50px; !* 图片位置,100px是距离左边的距离,50px是距离上面的距离 *!*/

简写方式

background: yellow url("meinv.jpg") no-repeat 100px 50px;背景颜色 背景图 片路径 是否平铺 图片位置

示例代码：

• 背景图片不动

示例代码：

5边框属性

/*border-style: dotted;*/  样式/*border-color: red;*/   颜色/*border-width: 10px;*/  宽度简写形式:    /*border: 10px solid yellow;*/四个边框可以单独设置:    border-left:10px solid yellow ;    border-right:10px dashed red ;设置圆角    border-radius: 5%;  /* 设置圆角 */示例:    
            
    

边框样式的值

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

6display属性

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点（不占整行，可以设置高度和宽度）

示例代码：

    
            
    
     xxxxxxx
    
span1111

隐藏标签

/*display: none;*/   /* 隐藏标签,不占原来的位置 */visibility: hidden;  /* 原来的位置还占着 */

示例代码：

7.盒子模型

content:内容  width和height 是内容的高度宽度padding:内边距 内容和边框之间的距离border:边框margin:外边距 标签之间的距离,如果两个标签都设置了margin,选最大的值,作为双方之间的距离占用空间大小:content+padding+border

示例代码:

示例    
            
    
         div1
    
    
         div2
    
    
         div3
    

四个方向单独设置padding

padding-left: 10px;padding-top: 8px;padding-right: 5px;padding-bottom: 5px;

四个方向单独设置margin

margin-top: 10px;margin-left: 100px;margin-bottom: 50px;margin-right: 200px;

8.float浮动

一般用来进行页面布局

浮动会脱离正常文档流会造成父级标签塌陷问题

清除浮动(解决塌陷问题)

clear: both; /* clear清除浮动 */ left\right方式1:    1.父级标签设置高度    2.通过伪元素选择器来进行清楚浮动:写法如下        .clearfix:after{            content:'';            display: block;            clear: both;        }     示例:            
            
    
    
    
     
      div1
     
    
     
      div2
     
    
    
     div3
    

clear清楚浮动

clear：clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

overflow溢出

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

9.定位

position : relative /absolute /fixedtop:10px;right:10px;bottom:10px;left:10px;（写四个值的时候，顺序是上、右、下、左，写两个值的时候，顺序是上下、左右）相对定位 :相对自己原来的位置移动,移动之后还占据原来的位置绝对定位 :绝对定位是相对于整个html页面,不会占据原来的位置,层级的提升        如果我们设置了绝对定位的元素 的父元素 没有设置position,那么我们对元素的所有设置都是基于整个页面        如果设置了position,那么子盒子的absolute位置会根据父盒子的位置定位        父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置固定定位 :固定是相对于整个窗口的设置0的时候，不需要加px

10.z-index

z-index:100;用法说明:z-index 值表示谁压着谁，数值大的压盖住数值小的，只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-indexz-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。从父现象：父亲怂了，儿子再牛逼也没用（父级标签设置的index小，儿子设置的index再大也没用）

11.opacity

opacity: 0.5;调整d4对应的整个标签的透明度是50%.d4{    opacity: 0.5;}
    
         你好你好娃哈哈    
     
    
opacity和rgba的区别：    opactiy是整个标签的透明度，rgba是单独给某个属性设置透明度

12.原型头像

13.一个类可以设置多个类值

    
c2和c1相同的样式，会覆盖c1的，使用c2的class类值可以是多个，中间空格分隔