关于css基础知识

关于css基础知识

一、语法
css是级联样式表 ，CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。
可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。
也就是把html网页内的内容超文本语言和样式表关联起来 加以修饰。
CSS与HTML的关系

• HTML是网页内容
• CSS定义页面的样式

<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>
style标签是css里最重要的标签 通过style标签可以直接修饰各类属性
二、@规则

1.因为css对空格不敏感，因此在每个样式后都要加一个分号，不然会把写在后面的样式当成一个整体来解析，直到遇到分号为止。

2.当遇见不认识的属性或值时，将忽略这个属性，继续解析后面的属性。

3.对于复合属性，只要其中一个值是错误的，那么整个属性都不解析。

4.最后一个CSS规则的大括号可以不闭合。

5.后代选择器中间必须加空格。

6.换行会被当做一个空格。

7.关键字不可以用引号，否则会被忽略。

8.在多组选择器中，只要有一个选择器是错误的其他的也不会执行。

9.在CSS中，如果需要使用到@import规则导入外部样式表，那么需要注意的是，@import规则只能写在其他样式规则的前面，否则@import规则会被忽略。

三、层叠性
指多种CSS样式的叠加。
是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。
原则：
1、样式冲突，遵循的原则是就近原则，即CSS的书写位置。
2、样式不冲突，不会层叠

四、选择器

• 基础选择器
• 层次选择器
• 伪类选择器
• 伪元素选择器
• 属性选择器

【基础选择器】

元素选择器（选择元素名） \ 如：p{color:red;}
ID选择器（#号+ID名）\ 如：#csdn{color:black;}
类选择器（.+class名） \ 如：.csdn{color:blue;}
通配符选择器（选择全部元素，不建议使用）\如：* {color：green}
并集选择器/组合选择器（多个不同的标签，应用相同的样式/声明冲突时，需要分开计算）\如：p,h1,span{color:red;}

【层次选择器】

子级选择器 (元素之间用>分割)\如：p>span{color:red;}
后代选择器（元素之间用空格分隔)\如：section span{color:blue;}
兄弟选择武器（元素之间用+分隔)\如：h1+h2{color:green;}

【伪类选择器】

动态伪类选择器：（网络通用：·爱恨原则·）
动态伪选择器的书写顺序： 1、link和visited必须放在最前面（无先后顺序,静态伪类选择器）
2、link和visited只能用于a标签 3、link和visited后面是focus 4、focus后面是hover
5、hover后面是active

【结构为类选择器】

元素名：first-child第一个元素。
元素名：last-child最后一个元素。
元素名：nth-child(n)某一个元素 想选择第几个，n就取值多少。
元素名：nth-child(-n+m)选中前m个元素 n起始值是0。
元素名：nth-of-type(n) 选中第n个元素。
元素名：nth-last-child(n)选中倒数第n个元素.

【否定伪类选择器】

元素名：not（n）除了某个元素，其它元素添加样式

【伪元素选择器】（CSS创建的元素,都是选中元素的子元素）

元素名：before(元素的第1个子元素)
元素名：after(元素的最后1个子元素)
元素名：first-letter(元素的第1个字)
元素名：first-line(元素的第1个行)
input::-webkit-input-placeholder（修改输入框提示信息样式）
【属性选择器】
元素名称[属性名+“属性值”]\如：input[type=“text”]
[扩展]

1.格式： 元素名[属性名^=属性值开头的内容]选中以XXX开头的元素
input[type^=“te”]+span{ color:red;}
2.格式： 元素名[属性名 $ =属性值结尾的内容]选中以XXX结尾的元素
input[type $ =“d”]+span{ color:blue;}
3.格式： 元素名[属性名* =属性值包含的内容]选中包含XXX的元素
input[type*=“i”]+span{ color:green;}

五、优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
继承样式的权重为0.即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100.总之，他拥有比上面提到的选择器都大的优先级。
权重相同时，CSS遵循就近原则，也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也主浊说不管权重如何以及样式位置的远近，！important都具有最大优先级。

六、继承性
写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。
注意：恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-,font-，line-这些元素开头的都可以继承，以及color属性）

七、文档流
文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
分为两种等级：块级元素和行内元素；

块级元素：
1).霸占一行，不能与其他任何元素并列
2).能接受宽、高
3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽

行内元素：
1).与其他元素并排
2).不能设置宽、高。默认的宽度就是文字的宽度
在HTML中，标签分为：文本级和容器级；
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd

温馨小提示：

(1).容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。
(2).p标签是一个文本级标签。p里面只能放文字、图片、表单元素。其他的一律不能放。
(3).定义列表是一个组标签，不过比较复杂，出现了三个标签：
dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义表述词儿
dt、dd只能在dl里面；dl里面只能有dt、dd

块级元素可以设置为行内元素；
行内元素也可以设置为块级元素。
举个例子：

div {
  display: inline;
  background-color: pink;
  width: 400px;
  height: 400px;
}

display是显示模式，用来改变元素的行内、块级性质
，一旦给一个标签设置display:inline;那么这个标签立即变为行内元素。此时div和span没有什么区别，此时的div不能设置宽度和高度（即使设置了也并不显示出来，不信你去用代码验证一下呀），此时div可以和别人并排

同理

span {
   display: block;
   width: 300px;
   height: 300px;
   background-color: green;
}

此span标签变为块级元素，与div无异；此时的span能够设置高度和宽度；并且霸占一行，别人不能与之并排；如果不设置宽度，那么将撑满父亲。

标准流里面的限制特别多，标签的性质也特备恶心。标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。

css中有三种手段可以使一个元素脱离标准文档流，分别为浮动和绝对定位,固定定位。
八、盒模型
基本概念：标准模型+IE模型
盒模型：盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
IE模型和标准模型唯一的区别是内容计算方式的不同
IE模型元素宽度width=content+padding+border，高度计算相
标准模型元素宽度width=content，高度计算相同
css如何设置获取这两种模型的宽和高
通过css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型（content-box）和IE模型（border-box）。

.content-box {
  box-sizing:content-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.content-box设置为标准模型，它的元素宽度width=100px

.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.border-box设置为IE模型，它的元素宽度
width=content + 2 * padding + 2 * border = 70px + 2 x10px + 2 x5px = 100px
九、颜色文字属性及样式
1.颜色表示形式：

十六进制形式：通常由1_9，af，混合搭配表示形成，例：#ff88888

dddddddddddddddd

RGB颜色;

形式：RGB(128,0，0)

RGBA颜色：

在RGB颜色的基础上增加了透明度分量，该分量的取值范围为0~1，表示完全透明和完全不透明。

2.内联样式：就是使用在原处直接定一样式，内容和表现形式高度耦合。

弊端：不利于分工合作，延长设计周期。

只能应用于当前标签。

内部样式：写在标签中，通过style标签定义。

内容和表现形式降低了耦合程度，但都是在html中，没有实现完全分离。

定义的样式只能应用于当前页面，重复利用率低。

外部样式表：首先定义一个样式表文件（.css）,利用标签使之引入HTML中。

外部样式表是内容和表现形式完全分离，有利于分工合作及后期的维护，可以在多个HTML文件中使用，重复利用率高。
3.字体相关属性：
font-family：字体名称
font-size：字体大小
font-style
font-variant
font-weight
color 字体颜色
text-algin:center 文字居中
Text-decoration：
None：默认值，没有装饰效果
Underline;加下划线
Overline：加上划线
Line-through：加删除线
Text-shadow:加阴影，其水平方向上移动5px，垂直方向上上移5px。
text-shadow:red -5px -5px;
Direction：文本方向
Ltr：从左向右
Rtl：从右向左
Text-align：文本对齐方式
Left：左对齐
Right：右对齐
Center;居中对齐
Justify：两端对齐
Vertical-align：文本垂直对齐方式
Top：靠上对齐
Bottom：靠下对齐
Middle垂直居中对齐
Text-indent：文本缩进
Letter-spacing：字符之间的间距
Word-spacing：字（单词）间距
line-height：设置行高，实际上是调整行间距。
4.颜色和背景属性
颜色属性color:颜色取值 例：color:red。 color可以用关键字或者一个十六进制的RGB值。
color:#ff0000 表示红色 color:#ffff00 表示黄色 color:#000099 表示蓝色

背景颜色background-color:颜色取值
背景图像background-image:url(图像地址)
背景重复background-repeat:取值 . no-repeat表示背景图像不平铺；repeat表示背景图像平铺排满整个网页；repeat-x表示背景图像只在水平方向上平铺；repeat-y表示背景图像只在垂直方向上平铺。
背景附件background-attachment:scroll/fixed scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面上不动，只有其它内容随滚动条滚动。
背景位置background-position:位置取值 。一种采用数字取值，另一种采用关键字描述。如：x,y. left top .
背景复合属性background:url(图像地址) no-repeat left top;

5.段落属性

单词间隔word-spacing:取值。默认normal;取值可正可负。
字符间隔letter-spacing:取值。6px,3px等具体的值
文字修饰text-decoration:取值。 none表示不修饰，默认值；underline表示对文字添加下划线；overline表示对文字添加上划线；line-through表示对文字添加删除线；blink表示文字闪烁效果。
垂直对齐方式vertical-align:排列取值
baseline:浏览器默认的垂直对齐方式。

    sub:文字的下标。

    super:文字的上标。

    top:垂直靠上对齐。

    text-top:使元素和上级元素的字体向上对齐。

    middle:垂直居中对齐。

    text-bottom:使元素和上级元素的字体向下对齐。

文本转换text-transform:转换值
none:表示使用原始值。

      capitalize:表示使每个单词的第一个字母大写。

      uppercase:表示使每个单词的所有字母大写。

      lowercase:表示使每个单词的所有字母小写。

水平对齐方式text-align:排列值。
left:左对齐。

        right:右对齐。

        center:居中对齐。

        justify:两端对齐。

文本缩进text-ident:缩进值。取值为：长度值或者百分比。
文本行高line-height:行高值。取值为：长度、倍数或百分比。
处理空白white-space:值。normal是默认值，即将连续的多个空格合并；pre会导致源代码中的空格和换行符被保留，但这一选项只有在IE6中才能正确显示；nowrap强制在同一行内显示所有文本，直到文本结束或者遇到换行（
）对象。
文本反排unicode-bidi:bidi-override | normal |embed override表示严格按照direction属性的值重排序；normal表示为默认值；embed表示对象打开附加的嵌入层。
direction:ltr | rtl |inherit ltr表示从左到右顺序阅读；rtl表示从右到左顺序阅读；inherit表示文本流的值不可继承。
外边框与内边距属性
内容区 通过width , height ,overflow调整
内边距通过padding-top,padding-bottom,padding-left,padding-right调整
边框通过border-style,border-width,border-color调整
外边框通过margin-left,margin-right,margin-top,margin-bottom调整
复合属性margin:长度值 | 百分比 | auto 可以取1~4个值

• {margin:10px 20px 10px 10px}代表上,下,左,右分别是10px,20px,10px,10px
• {margin:10px 20px 30px}.上边距是10px,左右边距是20px,下边距是30px
• {margin:10px 20px}代表上下边距是10px,左右边距是20px
• {margin:10px} 代表所有边距都是10px

边框属性
边框样式语法

• border-style:样式值
• border-top-style:样式值
• border-right-style:样式值
• border-left-style:样式值
• border-bottom-style:样式值