### 1.css常见样式 1.内部样式，适用于不多的较为简洁的样式 ``` <style> div{ font-size:30px; background:red; } </style> ``` 2.内联样式【不要用】 ``` <div class="one" style="background:red;font-size12px;"></div> ``` 3.外部样式表【重点掌握，极力推荐】   ***** ### 2.常用CSS属性 ~~~ width height color //字体颜色 background-color padding //内边距 margin //外边距 border //border-width， border-style，border-color border-color border-style //solid可见 border-width line-height text-align //文本水平方向(可对内联块和内联标签设置) text-indent //首行缩进 text-decoration //text-decoration:underline/overline/line-through/none 下划线 cursor: pointer; //鼠标变成抓手 list-style:none; //去掉无序列表前面的圆点(“ul”和“li”均可使用) ::after //伪元素(在元素之前添加内容) ::before //伪元素(在元素之后添加内容) //按如下顺序，才能实现组合效果 :link //未访问的链接 :visited //已访问的链接 :hover //鼠标移动到链接上 :active //选定的链接 ~~~ ***** ### 3.margin，padding设置 ``` 1.margin/padding:10px; //四个方向都改变，距离一样 2.margin/padding:10px 20px; //第一个值:top,buttom;第二个值:right,left 3.margin/padding:10px 20px 30px; //第一个值:top;第二个值:right,left;第三个值:bottom 4.margin/padding:10px 20px 30px 40px; //top,right,bottom,left ``` ***** ### 4.内联块、内联标签变为块标签 ``` display:block; ``` ***** ### 5.水平居中 #### **块标签水平居中** ##### 方法一： ``` margin-left:auto; margin-right:auto; ``` #### **内联块、内联标签水平居中** ##### 方法一： ``` text-align:center; //在不改变display的情况下 ``` ***** ### 6.样式重置 ~~~ *{ margin:0; padding:0; } ~~~ ***** ### 7.元素、class、id选择器  <br/>  ***** ### 8.分组选择器  ***** ### 9.后代选择器    ***** ### 10.兄弟选择器 ``` .one+p //选中one之后第一个p标签 .one~p // 选中one之后所有的p标签 ```   ***** ### 11.伪类选择器 ~~~ :hover //鼠标悬停 :focus //获取焦点 ~~~ ***** ### 12.伪元素 伪元素是用CSS代码生成的元素，不是像p，div，h1这样已经定义好的元素  >网页效果图  ***** ### 13.选择器优先级  ***** ### 14.鼠标悬置放大图片  ***** ### 15.去掉div下img 下端的空白  ***** ### 16.background ``` background:red; //设置单个值其他各个值默认 ``` ##### **background值顺序** ``` background:color image repeat position ``` ##### **背景图** ``` background-image:url("xxxxx"); ``` ##### **背景重复** ``` background-repeat:repeat/no-repeat/repeat-x/repeat-y ``` ##### **背景图位置** ``` background-position-x:center; background-position-y:center; ``` ##### **背景大小 width height** ``` background-size:100% 50%; background-size:cover/100% 100%; ```  #### **背景关联** 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。您可以通过`background-attachment` 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定`fixed`，因此不会受到滚动的影响： ~~~ body{ background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed/scroll (默认滚动); } ~~~ #### **background，background-color，background-image使用时应该注意的问题** 只给background设置背景图，那么color默认为transparent（透明） ``` background:url(); ``` 如果设置background-image，那么要让color透明就需要单独设置，并且要让背景有颜色就应该设置background-color，而不是直接设置background； ``` background-image:url(); background-color:xxx; ``` ***** ### 17.图像自适应 ~~~ img{ max-width:100%; height:auto; } ~~~