暑假学习css学习笔记

  暑假开始快速学习css了，今天就把快速学习的结果总结一下。

  首先，CSS的全称为Cascading Style Sheets翻译为层叠样式表。就是为了解决内容与表现分离的问题。给人的感觉就是头文件的感觉，可以把一些必要的声明写在外部样式表中，在真正实践的时候就可以很方便快捷。比如需要进行全局的更新，那么只需要简单的改变样式就行了。当然，如果规模较小，可以在html的头元素中添加style的声明。

  下面简单的总结一下css的语法，它主要是由两部分构成：选择器，和一条或多条的声明。比如h1{color:red;font-soze:14px;}在这里，h1就是选择器，花括号内的是声明，表示h1的标题是红色的字体大小为14px的。假如声明的值是单词那么要记得加引号。（还有一点，在css的声明里面一般都是声明加引号，在声明中一般很少用等号（这个可能是我的见识问题，毕竟才刚开始。如果在之后碰到了，那么这句总结就是错的了。））

  那么我们该怎么创建一个css呢？这是一个问题。给出的解决方案一共有三个。首先是外部样式表。一般在多个页面的时候外部样式表是一个很好的选择。一般就是你自己写了一个css然后在写页面的时候在头元素下加上这样的声明。

<link rel="stylesheet" type="text/css" href="mystyle.css/">其中"mystyle"是你自己写的css的名称。一般你去查看一个网页的源代码的时候，几乎都是这样的css声明。第二种就是内部样式表。就是直接在一个Html文件内加入这样的声明。

<style type="text/css">XXX</style>结束标签不要忘记。最后一种就是内联样式，就是像html里面的一样。因为它只能应用在一个元素上，所以比较..lj。当然假如你使用了外部样式表里面对一个元素有定义但是你又在html中加入了内部样式表这个时候该元素的样式就是内部样式表加上内部样式表没有声明但是外部样式表声明的部分。

  下面就是学了css样式。首先是css的背景。一般声明是background-color,background-image（这个是背景插入图片，需要url()）但是要牢记的是背景属性是不能继承的。background-repeat是背景重复的（repeat-x,repeat-y,no-repeat）background-position是声明背景的位置的（可以用百分数值，长度值）background-attachment是防止滚动的时候图片跟着一起移动（attachment："fixed"）

  下面就是css的文本。text-indent表示文本缩进，text-align可以实现文本对齐。也可以实现word-spacing属性。来实现字体之间的标准间距。有px,em属性。对于单词，有lette-spacing来实现字母间隔。用tex-transform属性来处理文本的大小写。（none,uppercase大写,capitalize首字母大写）text-decoration属性来可以进行文本的装饰（none,underline,overline,line-through）。

  在文本中设置字体就是用，font-family来设置，语句的形式和之前是一样，如果在字体名称中带有引号或者其他符号的时候，就要加上单引号。font-style是定义字体的风格的。font-weight是定义文本的粗细的（关键字是从100-900，其中正常的是400）font-size是定义文本的大小。

  下面就是css的链接了。链接有四种状态：a:link - 普通的、未被访问的链接，a:visited - 用户已访问的链接，a:hover - 鼠标指针位于链接的上方，a:active - 链接被点击的时刻。其中a:hover必须要在a:link和a:visited之后，a:active必须在a:hover之后。

  然后就是列表了。实际上可以用list-style:来表示所有的风格，就是把你想要的属性全部写在list-style的后面，只需要通空格隔开就行了。

  css的表格主要就是多了border-collapse来使表格变成单线的表格。并且你可以直接在border后面直接加上便捷的宽度、颜色等等。 并且还可以用css的轮廓来装饰表格，<outline>，可以直接在outline的后面写你想要的风格，比如颜色(outline-color,outline-style,outline-width)。

  css的框模型有很多，首先是内边框距，padding来表示，上下左右边框只需要在padding-加上top,bottom,left,right即可。下来就是边框了。面框的属性为border-style，颜色为border-color，有一点就是在写颜色的过程中是有值复制一说的，就是以上边界为开始进行逆时针的旋转，分别为上，右，下，左，并且按照这个顺序进行。1对3,2对4这样。外边距就是用margin来实现，并且接受任何单位长度。

  css的定位，位置属性为position。相对位置的含义为相对于正常位置的位置，绝对位置是你将参数给定，那么它的位置也就给定了。

  下面就是css的选择器，我感觉就是css的一个方便的地方。首先学到的就是元素选择器，就是文档的元素就是最基本的选择器。比如在头元素中加入h1{color:blue;}那么h1的标题就会变成蓝色。选择器分组就是假如你想让标题和段落的格式一样，那么直接可以写成h1,p{}的形式。下来就是类选择器，它的语法就是 .类名。在使用的时候就是在开始标签中加入class=""就可以使相应元素有类名中声明的属性。而ID选择器类似于类选择器，但是它的语法是在id的名字前面加一个#。然后在段落中加入id="名字"。还有一点主要的差别就是ID选择器里面只能使用一次。还有一个伪类可以与css类结合。比如a.red:visited{}。而lang伪类可以在不同的语言定义下定义特殊的规则。比如引用。q:lang(no){quotes::"~""~"}在使用的时候就是在开始标签中加上lang="no"。

  下来就是一些css的高级操作。其中有一个使图片的透明度降低的是使用opacity（他的参数的范围是从0~1），想要实现把鼠标放上去图片的颜色会加深，那么只需要结合前面的伪类即img:hover{opacity：1；}即可。