CSS学习总结

一、什么是css？

CSS级联样式表其实就是可以把丑陋的网页变得更为美观，对元素的属性进行控制。
也就是说，HTML 用于撰写页面的内容，决定在这个网页上面都有上面元素，而 CSS 将决定这些内容该如何在屏幕上呈现，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

二、css文档构成

css样式表用于给html中的元素设置属性，一个css文档一般是有一个或者是多个选择器以及声明组成，选择器是需要改变样式的HTML元素，每一个声明由一个属性和一个值组成。
如：

p 
{   
      color:red;
      text-align:center;
}
//p是要设置的样式属性，每一个属性都有一个值，属性和值被冒号分开

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来
css注释：/* 这是个注释 */
css样式表也可以直接写在html的style元素里面，也可以新建一个css文档，然后在html中引用即可

三、一些学习记录总结

• 对于标题的css样式表

//样式表
 <style>
    body {background-color:rgb(10, 179, 134);}
    h1   {
      font-size:36pt;
      color: rgb(255, 131, 30);
    }
    h2   {color:blue;}
    p    {margin-left:60px;}
  </style>

注：css样式表可以设置标题的颜色，位置，大小等属性；通过css样式表对元素属性的设置，确实更加好看了；

• 对于段落的样式表

  <style>
    body {background-color:rgb(10, 179, 134);}
    h1   {
      font-size:36pt;
      color: rgb(255, 131, 30);
      text-align:center;
    }
    h2   {color:blue;}
    p    {
      margin-left:60px;
      text-indent:25px;
      letter-spacing: 10px;
    }
    p.date {text-align:right;}
    p.main {text-align:justify;}
    a:link {text-decoration:none;}    /* unvisited link */
    a:visited {text-decoration:none;} /* visited link */
    a:hover {text-decoration:underline;}   /* mouse over link */
    a:active {text-decoration:underline;}  /* selected link */

  </style>

注：css可以设置段落的页边距，位置、字符间距、行距、文本方向、文字环绕、段落缩进等
如上图可见，当我把字符间距设置为20px之后很明显两个汉字之间距离加大了，要注意的是，调整汉字间距的时候要使用letter-spacing 属性来设置字符间距，word-spacing 用于调节词间距，因为汉字之间一般没有空格，所以使用letter-spacing来设置的时候才能得到想要的结果；而且当我设置text-indent为25px时，也就是段落，缩进25px，发现要比没有缩进的段落更加美观一些；

• 盒子模型
  所有HTML元素可以看作盒子，在CSS中，"box model"是用来设计和布局，css盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
  盒子模型示意图如下：
  

Margin(外边距) - 清除边框外的区域，外边距是透明的,web页面上是不可见的
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

一个例子：

div {
    background-color: rgb(44, 23, 113);
    width: 300px;
    border: 25px solid rgb(176, 137, 8);
    padding: 25px;
    margin: 25px;
}

注：这里设置有 25px 内间距，25px 外间距、25px 黄色边框，内容背景颜色设置为蓝色；
一般来说，我们设置元素的时候习惯设置宽度和高度，这里的宽度和高度指的是内容区域的宽度和高度，一个完整大小的元素，还需要添加内边距、边框和外边距
元素的实际总宽度计算公式;
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的实际总高度计算公式：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

• css边框

CSS边框属性允许设置一个元素边框的样式和颜色；

 p    {
      margin-left:60px;
      text-indent:25px;
      letter-spacing: 10px;
  
      border: 1px solid grey;
      border-radius: 15px; /* 边框圆角 */
	    border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
    }

注：这里设置了边框为圆角，每一方向边框的颜色不一样，也就是说，在css中，可以单独设置每一条边框线的样式
设置边框样式格式如下：
border-style：属性1，属性2，属性3，属性4
上->右->下->左
border-style：属性1，属性2，属性3
上->左右->下
border-style：属性1，属性2
上下->左右
border-style：属性1
上下左右属性相同

• 定位
  css中，position 属性指定了元素的定位类型，position有以下五个属性：static、relative、fixed、absolute、sticky。
  stactic定位是html元素默认的定位方式，静态定位的元素不会受到 top, bottom, left, right影响；
  fixed 定位的元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动，使的元素的位置与文档流无关，并不会不占据空间，能和其他元素重叠；
  relative 定位极为相对定位元素的定位是相对其正常位置，移动相对定位元素，但它原本所占的空间不会改变；
  absolute 定位即绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于；absolute 定位使元素的位置与文档流无关，因此并不占据空间，而且绝对定位的元素和其他元素重叠。
  sticky 定位即粘贴定位，是基于用户的滚动位置来定位；粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
  当页面在目标区域滚动的时候，它的表现就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed，固定在目标位置。

一个例子：

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #af964c;
   }

注：本列中元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位；
元素可以使用的顶部，底部，左侧和右侧属性定位，但是这些属性发挥作用的前提是先设定position属性，有着不同的工作方式，取决于定位方法

• 浮动
  CSS 的 Float，会使元素向左或向右移动，其周围的元素也会重新排列，一般是用于图像，而且在布局时一样极具作用。

 div {
    float:right;
  	width:120px;
  	margin:0 0 15px 20px;
  	padding:15px;
  	border:1px solid black;
  	text-align:center;
   }

注:本例中是将div元素设置为右浮动，div元素是120像素宽,它包含了图像和文字， div元素会向右浮动。 Margins 被添加到div使得文本远离div，如果没有设置的话，文字就会出现在图片的下方，不是很好看

• 不透明度
  设置图像或者是文本的不透明度，在网页中是应用的非常多的，可以使得这个网页看起来没有那么无趣。
  在CSS中透明度的属性是 opacity，不仅仅是可以设置一个普通图像的透明度，同样可以设置鼠标悬停效果
  看一个例子：

 img
{
	opacity:0.4;
	filter:alpha(opacity=40); 
}
img:hover
{
	opacity:1.0;
	filter:alpha(opacity=100);
}

• 组合选择器
  在css中，有后代选择器、子元素选择器、相邻兄弟选择器和普通兄弟选择器四种组合选择器，用于得到更为简洁明确的选择；
  后代选择器：用于选取某元素的后代元素，以空格 分隔
  子元素选择器：与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素,以大于>号分隔
  相邻兄弟选择器：可以选择紧接在另一元素后的元素，并且二者有相同父元素,以加号+分隔
  普通兄弟选择器：用于选取所有指定元素之后的相邻兄弟元素，以波浪号 ～ 分隔
  一个间的的子选择器使用：

 div>p
{
	  background-color:rgb(93, 18, 164);
}
 <div>
    <h2>阿布阿布</h2>
    <p>我可以写的更好看.</p>
    </div>

注：这个列子是将”阿布阿布“这个元素设置为了父元素，而将“我可以写的更好看”设置为了子元素，显示出了设置的相应的效果
在使用选择器的时候特别需要注意组合符号的书写，要是不小心写错了，就会显示不出来想要的结果，然后自己又不知道是那里写错了，因为语法没有问题，编译器是不会报错的！

五、总结

经过短暂的css的学习，我算是把css的一些基本内容都学习完了。没有学css之前，用HTML去使用标签设置元素属性，真的很麻烦，学了css之后，可以直接设置一些属性的参数，然后在html元素就可以直接使用设好的属性参数，不需要每次都要设置一边。
css，直白来说，就是为了让页面变得好看又为了省事，减少在设置属性参数上面的工作量。在css中，组合选择器的使用又使得css的使用更为简介省事了。
在css中，还特别需要注意是伪类和伪元素的使用，伪类（pseudo-class）或伪元素（pseudo-element）是用于定义元素的某种特定的状态或位置等。伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以当一个元素达到一个特定状态时，可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。即比如说设置链接的时候，点击连接前一种，点击时又是一种状态，然后放开点击了又会是一种新的状态如此这般。与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，所操作的层次比伪类更深了一层，也因此伪元素的动态性比伪类要低得多。
目前学习完了HTML和css，我在web开发上面又前进了一小步，接下来我还会继续深入学习web。