CSS总结

太过爱你忘了你带给我的痛 2022-06-05 08:16 158阅读 0赞

# CSS总结 #

CSS英文名：Cascading Style Sheets

**中文名**:汉式层叠样式表

**作用**：用于修饰网页信息的显示样式，控制网页的外观；

**组成**：选择器+一条声明；

**选择器**：表明要应用规则的元素；

**声明**：用于表明应该如何显示选择器指定的元素；

**语法结构**：选择器\{属性：属性值\}     例：\{p:color:\#000;\}

**样式表的种类**：1.内部样式表  2.外部样式表  3.行内样式表

**选择器**

*  通配符选择器  \*\{\}
 *  标签选择器：p\{\}
 *  类别选择器：.classname\{\}
 *  ID选择器：\#idname\{\}
 *  伪类选择器：  ：link\{\}  :visited\{\}   :hover\{\}  :active\{\}      巧记 L-V-H-O
 *  群组选择器：h1,h2,p\{\}
 *  后代选择器：div a\{\}
 *  选择器的优先级：id>class>标签

**文字属性**：

*  字体颜色：color:\#000;
 *  字体类型：font-family:Arial/Verdna/sens-serif;  默认的是：Arial
 *  字体大小：font-size:12px;
 *  粗体：font-weight:normal普通显示/bold粗体显示;
 *  斜体：font-style:normal普通显示/italic斜体显示/oblique倾斜;
 *  文字大写：text-transform:uppercase;
 *  文字小写：text-transform:lowercase;

**段落属性**：

*  文本缩进：text-indent:2em/-2em;//可正可负
 *  文本对齐：text-align:center/left/right;
 *  文本修饰：text-decoration:none/underline/overline/line-through;
 *  行高：line-height:20px;
 *  字符间距:letter-spacing:2px;
 *  词间距：word-spacing:2px;

**背景属性**：

*  背景颜色：background-color:\#f00;
 *  背景图片：background-image:url("路径");
 *  背景平铺：background-repeat:repeat(默认)/no-repeat(不平铺)/repeat-x(水平平铺)/repeat-y(垂直平铺);
 *  背景位置：background-position:left/center/right/top/bottom/数值;
 *  背景属性的缩写写法：background:url(路径) no-repeat center top;

**列表属性：**

*  list-style-type:none;清除列表的项目符号
 *  list-style-img:url(路径);将一个图片作为项目符号使用
 *  list-style-position:;表明项目符号显示的位置
 *  list-style:disc;小圆点
 *  list-style:circle;实心小圆点
 *  list-style:square;实心正方形

**定位：**

*  定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。  
    
 *  语法：选择符\{position:value;\}
 *  static：默认。标准文档流，默认值，无特殊定位，处于文档流中。
 *  relative:相对定位。不脱离文档流，以自身的位置进行偏移。
 *  absolute:绝对定位。脱标不占位，相对于具有定位属性的父级元素（除了静态定位）偏移。如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。
 *  fixed:固定定位。是绝对定位的一种特殊形式，以浏览器窗口作为参照物。
 *  注：固定定位始终以浏览器窗口为参照物，不管浏览器的滚动条如何滚动，也不管浏览器窗口大小如何变化它始终以浏览器窗口作为参照物。

**浮动：**

*  浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。  
    
 *  float:left/right;
 *  float:left;左浮动，使块元素在一行显示。
 *  float:right;右浮动，使块元素在一行显示。
 *  给元素设置浮动时，可能会造成高度塌陷，这时我们便有了万能请浮动

法一： .clearfix:after{ content:" "; height:0; display:block; clear:both; visibility:hidden; } 法二： .clearfix:after{ content:" "; display:table; clear:both; }

**其它常用属性**：

*  border

width （宽） height （高）  
颜色  border-color ;

样式：border-style: dotted  solid   dashed  none;  
   宽度：border-width: 2px;  
   border:宽度  颜色  样式（不能省略）  
 上边框颜色  border-top-color:  
  下边框复合属性 border-bottom:

*  边距和填充  
    外边距   margin  
    设置元素外边距的宽度  
    margin-top\\bottom\\left\\right  
    margin 复合属性，顺序为上右下左  
    padding内边距     
     内容和边框之间的的距离  
    padding-top\\bottom\\left\\right  
    padding 复合属性 上右下左

*  z-index属性  
    设置元素的层叠顺序，属性值为无单位的整数值，值较大的元素会叠加在值较小的元素之上  
    元素可拥有负的z-index属性值，默认值是：auto,默认层是：0层  
    当没有设置、属性或者层数相同时，后面的元素显示在上面  
    z-index的属性值，只能为整数，正整数，0，负整数

*  display属性  
    none不显示  
    inline-block行内块元素  
    block块元素  
    inline行内元素

*  overflow属性  
    指定对于盒中容纳不下的内容的显示方式  
    visible可见（默认值）  
    hidden隐藏  
    scroll滚动-一定出现滚动条  
    auto自动-按需出现滚动条

*  visibility 属性  
    设置可见性  
    visible：设置对象可视  
    hidden：设置对象隐藏

*  visibility:hidden与display:none的区别  
    visibility:hidden设置不可见的元素也会占据页面上的空间  
    display:none不可见的元素, 属性不占据页面空间

*  盒模型

边框：border属性

内边距：padding属性

外边距：margin属性

内容:content

css总结到这里就结束了，想自学的小伙伴们可以学习咯~~，其实这个总结只是一个大概的知识脉络，我以后会更新更细致的知识，有问题的小伙伴可以留言喔。我要继续去工作啦，拜拜~~~