CSS样式

一、html引入css样式

1、在head标签中直接写  <style>css属性</style>2、引入css样式文件 <link rel="stylesheet" href="css属性文件" type="text/css"/>3、在标签上直接写 style="css属性"

二、css选择器
1、id选择器

<style>    #i1{        font-size: 26px;        color: darkmagenta;    }</style><div id="i1">hellp div</div>

2、类选择器

<style>    .head-box{        font-size: 26px;        color: darkmagenta;    }</style><div class="head-box">hellp div</div>

3、标签选择器 (对设置所有标签都生效)

<style>    div{        font-size: 26px;        color: darkmagenta;    }</style><div>hellp div</div>

4、层级选择器(后代选择器和子代选择器)

4.1后代选择器 .c1 #i1 p{样式}   //对类名为c1下面id为i1的p标签设置的样式都生效4.2子代选择器 .c1>#i1>p{样式}   //对类名为c1下面id为i1的p标签以及同级的p标签生效，对于p标签里面的p标签不生效

5、组合选择器

.c1,#i1{样式}     //用逗号隔开，类名为c1和id为i1的都生效

6、毗邻选择器

div+p{样式}   //只针对和div同级别下面的相邻一个p标签生效

7、属性选择器

<style>    input[type="text"]{        width: 160px;        height:20px;    }</style>或者改成  .div1 [type="text"]{样式}<div class="div1"><input type="text" name="username"/></div>E[属性名=属性值]{样式}E[属性名~=属性值]{样式}   //匹配所有属性具有多个空格空格分割的值，其中一个值为 "属性值"的元素E[属性名^=属性值]{样式}   //匹配属性值以指定元素开头的元素，并且是包含匹配E[属性名$=属性值]{样式}   //匹配属性值以指定元素结尾的元素E[属性名*=属性值]{样式}   //包含匹配备注：E指代元素也就是Element

三、css属性
1、颜色属性

表达方式有三种：①rgb的方式    rgb(255,255,255) --> rgba(255,255,255,0.3)  //0.3为透明度，范围是0~1②英文字母③#+十六进制

2、伪类(当鼠标放到上面的时候会显示不同的属性)

.c1:link{样式}       //浏览器打开时显示的样式.c1:hover{样式}      //鼠标悬浮在上面的样式.c1:visited{样式}    //访问完后的样式.c1:active{样式}     //点击时的样式特殊点的：.c1:hover .c2{}       //当鼠标放在具有c1属性的标签上时，c1下的c2才生效

3、before和after         //前后添加内容或者属性，但是内容不可选

p:after{content:"aaa";}   //在p标签后面加内容aaa

4、内外边距

padding         #内边距margin          #外边距(四个方向：上右下左)margin:0 auto   #居中

5、overflow属性

overflow:hidden;  #隐藏overflow:auto;    #自动，和scroll一样，将窗口固定大小，超过此尺寸，会出现滚动条

6、display属性

display:inline          #转化为行内标签display:block           #转化为块级标签display:inline-block    #具有块级标签和行内标签的共有属性display:none            #让样式消失

7、border属性

border-color: red;border-style: solid;border-width: 1px;简写 border:1px solid red;

8、列表属性

ul li{list-style:none};     #清除样式

9、backgroud属性

background-color: #444444;               #背景颜色background-image: url("1.png");          #设置图片为背景background-repeat: no-repeat;            #背景图片是否重复background-size: 50px 50px;              #背景图片大小background-position: center center;      #背景图居中(上下 左右)备注：简写方式 background: url("1.png") no-repeat 0 -100px;

10、文本属性

height: 48px;              #高度width:20px;                #宽度，也可以为百分数，如80%font-size:20px;            #字体大小font-style: italic;        #字体风格font-family: "Times New Roman";  #字体样式color: red;                #字体颜色text-align: center;        #水平居中line-height: 48px;         #垂直方向剧中，要和height的大小一样font-weight: 200px/bold;   #字体加粗word-spacing: 3px;         #字母间像素或者间距

11、float属性         #浮动(非完全脱离)，因为文本是没有覆盖的

float语法：left | right | none | both

正常文档流：将元素(标签)在进行排版布局的时候，依照从上到下，从左到右的顺序排版的一个布局流
脱离文档流：在正常文档流的基础上将元素取出，进行一个覆盖

备注：
(1)已知外层高度——–内元素浮动时，不用管
(2)未知外层高度
如果父级标签里面没有内容，当子标签float的时候，就会脱离父标签的控制。内部元素清除浮动，有三种方法：

①在父标签设置样式  overflow:auto②在子标签最下面(或者叫沉底位置)添加一个div表情，设置样式  clear:both③在父级标签上加上clearfix属性，下面是在clearfix后面添加一个样式(**主流的是这个**).clearfix:after{content: "ooo";       //这个必须存在，任意即可，但是不能为空格display: block;clear: both;visibility: hidden;    //内容隐藏，但是位置还存在，这时应将内容的位置去掉，所以要设置height为0height:0;}

12、position属性

fixed    #固定在某个位置，一般用于返回顶部relative   #相对固定，自己用没有什么意义，一般和absolute连用absolute   #绝对固定

备注：
在属性里面出现position，此时用margin:0 auto 居中则不起作用；应改成 top:50%;right:50% 这样的形式

13、其他属性

opacity:0.5;           #设置透明度，范围是0~1z-index:5;             #设置层级关系，值越大，这个标签就会在最上面cursor: pointer;       #当鼠标放到上面的时候，会变成小手border-radius: 10%;    #将边框的四个角变圆vertical-align: -4px;  #设置图标和文本在一条线上min-height:700px;      #布局的时候中间背景和两边不一样height: auto !important;  #布局的时候自动填充高度，如果下面出现相同操作此相同属性则无效text-decoration: underline|none;  #将a标签文本下的下划线显示也去掉