CSS样式

一、概念
  CSS翻译过来叫做层叠样式表单，对实现页面的颜色，大小，字体等等的修饰，个人觉得就是实现网页的美化，在人机交付中有更好的用户体验，坚决了HTML的单一格式。这些样式定义如何显示HTML元素。这是由于如果是一个大型的网页，所有代码都写在一个HTML文件里面的话，会很不容易管理，同时代码的简洁度也不够，所以讲HTML文件内相同的样式提取出来，写到专门的CSS文件内，在通过引用的方式得以展现，大大提高了代码的复用率，提高了整体开发的效率。

 CSS语言的特点主要有这几个特点，丰富的样式定义，CSS提供了丰富的文档样式外观；易于使用和修改，CSS可以将样式定义在HTML元素的style属性中，也可以定义在HTML文档的header部分，还可以定义在专门的CSS文件中，供HTML文件引用。修改是只需要修改定义的那部分代码，不需要修改所以使用这个样式的标签。易于管理，CSS可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。多页面应用，CSS样式可以供任何页面文件都可以将其引用。页面压缩，样式声明在CSS样式表中，可以大大的减少HTML页面的内容，减少页面加载的时间。

二、分类

CSS样式又分为三种方式：

1.外部样式：将CSS样式编写并安放在一个独立的.css文件内，有<link />和@import两种方式如

<link rel="**********"href="*****">

2.内部样式：定义在style标签中，放在head标签中，设置的样式可以影响整个HTML页面如

<style type="text/css">
#page{

width:auto;height:600px;
border:1px;
margin:auto;
}

3.内联样式：内联样式，也称行内样式，写在标签内的样式，只影响该标签内的元素。适合范围，除<script>外的所有子标签。如

<h1 style="background-color=withe"></h1>

三、CSS语法规范
css语法规范：
h1{color:red;font-size:14px;}
选择器{声明1；声明2；.....}
css语法特性：
1、继承性：子元素继承父元素的样式（如：body和h、p的关系继承）
2、层叠性：对于同一个元素，能同时多次给出不同的样式，且都能应用
3、优先级：给同一个元素加多个样式，优先级由高到低依次为：内联样式、内部样式和外部样式（这两种采取就近原则 即：最后的样式为准）、浏览器默认样式。
选择器：（注意：在选择选择器时，如果考虑到某个元素样式的多变性，选用class选择器，后边可以通过改变className方法，转换样式）
四、常用CSS样式

文本样式

  1. text-indent：文本的首行缩进，px em
  2.  p{ text-indent:30px; }
  3.  text-align：文本对齐，left、center、right、justify
  4.  div{ text-align:center; }
  5.  line-height：设置行间距，即行高
  6.  p.content{ line-height:24px; }
  7.  word-spacing：字间距（单词），数值、normal
  8.  p.content{ word-spacing:22px; }
  9.  letter-spacing：字符间距，数值、normal
  10.  text-decoration：设置文本效果，取值：none、underline、overline、line-through、blink
  11.  p.content{ text-decoration:underline; }
  12.  font-family：字体，
  13.  p.content{ font-family:宋体; }
  14.  font-size：字体大小，数值
  15.  p.content{ font-size:12px; }
  16.  font-weight:normal、bold、bolder、lighter、数值(很少用)
  17.  p.content{ font-weight:bold; }
  18.  color:文本颜色，颜色的英文单词、16进制法、rgb法
  19.  p.content{ color:#006699; }
  20.  text-shadow：文本阴影（H5）
  21.  h1{text-shadow: 5px 5px 5px #FF0000;}
  22.  word-wrap：文本换行，单词长度太长也会强制换行（H5）
  23.  p {word-wrap:break-word;


盒模型

CSS中，每个HTML元素生成一个矩形框，它描述了该元素在页面布局中所占的空间大小，并会影响到其他元素的大小和位置。盒子模型由内而外包含以下内容：内容、填充（padding）、边框（border）、边界（margin）

  1.  盒模型高度和宽度  
  2.  width:设置元素的内容区域的宽度
  3.  框模型宽度 = width + padding-left + padding-right + border-left + border-right
  4.  height:设置元素的内容区域的高度
  5. 框模型高度 = height + padding-top + padding-bottom + border-top + border-bottom 4.盒模型margin
  7.  
  8.  margin作用：设置元素的外边界，边框之外的一段空白
  9.  取值：数值、%、auto
  10.  margin不会影响元素盒子自身的大小，但会影响盒子与其他元素的布局样式
  11.  margin：10px 10px 10px 10px;(上、右、下、左)
  12.  margin：10px 10px;（上下、左右）
  13.  margin：10px;（全部）
  14.  margin-left、margin-right、margin-top、margin-bottom
  15. 5.盒模型padding
  16. padding作用：设置元素的补白，内容到边框的一段空白
  17.  取值：数值、%
  18.  padding：10px 10px 10px 10px;(上、右、下、左)
  19.  padding：10px 10px;（上下、左右）
  20.  padding：10px;（全部）
  21.  padding-left、padding-top、padding-right、padding-bottom
  22. 6.盒模型border
  23. border-style：设置元素的边框样式
  24.  none、dotted、dashed、solid、double、groove、ridge、inset、outset
  25.  border-width：设置元素的边框宽度
  26.  border-color：设置元素的边框颜色
  27.  border：1px solid #FF0000; 设置边框的width,样式，颜色
  28.  border-radius: 设置圆角边框（H5）
  29. 7.背景 
  30.   background-color：设置背景颜色
  31.  background-image ：设置背景图片
  32.  background-repeat：背景重复，no-repeat、repeat-x、repeat-y
  33.  background-position：背景图片的位置，数值、top、left、right、bottom、center
  1. 8.列表样式
  2.  list-style-type：设置列表项的样式
  3. 取值：none、disc、circle、square、decimal、upper-alpha、lower-alpha、upper-roman、lower-roman
  4.  有序列表和无序列表都可以使用
  5.  .list{ list-style-type:none; }



posted on 2019-03-16 16:50  是有一只猫出没  阅读(214)  评论(0)    收藏  举报