前端:css,:css

1 什么是CSS?

奥门威尼斯网址 1

css基础知识(一),css基础知识(

一.Css规则主要由两部分组成 1.选择器 2.一条或多条声明
a. 选择器主要作用是为了确定需要改变样式的HTML元素
b.
每一条声明由一个属性和一个值组成,使用花括号来包围声明,属性与值之间使用冒号(:)分开,多条声明用分号(;)隔开.

例如:form {width: 200px;margin: 20px auto;}

二.选择器有id,类,元素(标签),属性,伪类,通用选择器

前几个大家大概都清楚,写一下伪类选择器:

css伪类用于向某些选择器添加特殊效果。

下面我们介绍一下锚伪类。

在支持css的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

* *

a:link {color: #FF0000}/\ 未访问的链接 */*

a:visited {color: #00FF00}/\ 已访问的链接 */*

a:hover {color: #FF00FF}/\ 鼠标移动到链接上 */*

a:active {color: #0000FF}/\ 选定的链接 */*

注意:

1.在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited
之后,才是有效的。

2.在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

 

3.伪类名称对大小写不敏感。

优先级id>伪类 >类 >元素>通用

三.值的单位

%百分比

in英寸

cm厘米

mm毫米

em能自动适应用户所使用的字体

pt磅 (1 pt 等于 1/72 英寸)

pc12 点活字 (1 pc 等于 12 点)

px像素 (计算机屏幕上的一个点)

(颜色名)颜色名称 (比如 red)

rgb(x,x,x)RGB 值 (比如 rgb(255,0,0))

rgb(x%, x%, x%)RGB 百分比值 (比如 rgb(100%,0%,0%))

#rrggbb十六进制数 (比如 #ff0000)

 

四.导入CSS

最常用的就是外部和内部样式表

1.内部样式表

在head标签中加入style标签,然后在style的标签体中再对多个标签的样式进行修改。

例如:

<style type=”text/css”>

div{

border:1px dashed #ff00ff;

}

</style>

2.外部样式表

通过head标签里的link标签,导入myStyle.css文件

例如:

<link rel=”stylesheet” href=”myStyle.css” type=”text/css”>

除此之外标签中也可以加入,style属性来写样式

 

五.CSS属性

1.字体

Css字体属性定义文本的字体系列,大小,加粗,风格(如斜体)和变形(如小型大写字母)

常用属性:

font:简写属性,作用是把所有针对字体的属性设置在一个声明中。

格式:{font :风格 异体 粗细 尺寸/行间距 字体系列}

例如:{ font: italic bold 12px/20px arial,sans-serif}

font-family:定义字体系列

•具体字体的名称,例如:font-family:隶书。 

•通常字体系列名称:例如
font-family:”serif”,”sans-serif”,”cursive”,”fantasy”,”monospace”

“,”的意思是指如果本地没有该字体系列,再使用下一个

font-size:定义字体的尺寸 例如 font-size:40px

font-style:定义字体风格 例如 font-style:italic

2.文本

CSS
文本属性可定义文本的外观。通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等.

常用属性

color:定义文本颜色  例如 color:#ffff00

text-align:定义文本对齐方式 例如:text-align:center

      text-decoration
向文本添加修饰。例如text-decoration:underline(下划线)

letter-spacing:定义字符间隔 

word-spacing:定义字间隔

3.背景

CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS
在这方面的能力远远在 HTML 之上。

常用属性:

background:简写属性,作用是将背景属性设置在一个声明中

格式:{background: 颜色 url(图片路径) 重复 滚动 位置}

例如:  {background: #00FF00 url(bgimage.gif) no-repeat fixed top}

 

background-color:定义背景颜色

background-image:定义背景图片  background-image:url(xx.jpg) 

background-position:定义背景图片的起始位置 background-position:10% 5%;

background-repeat:定义背景图片是否重复及如何重复
background-repeat:no-repeat

4.尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。

常用属性:

width:设置元素的宽度

height:设置元素的高度 

5.列表

CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。

常用属性:

list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。

格式:{list-style : 图片 类型 位置}

例如:{list-style : url(liebiao.jpg) square inside}

      list-style-type:定义列表项标志的类型

  list-style-position:定义列表项标志的位置  常用值:inside ,outside

  list-style-image:定义列表项标志为图象

6.表格

CSS 表格属性可以帮助您极大地改善表格的外观

 常用属性:

border-collapse:定义是否把表格边框合并为单一的边框。常用值:collapse,separate

border-spacing:定义分隔单元格边框的距离

caption-side:定义表格标题的位置常用值:top,bottom

7.轮廓

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

常用属性:

outline:在一个声明中设置所有的轮廓属性

格式:{outline:颜色 样式 宽度}

例如:{outline:#00FF00 dotted thick;}

      outline-style:定义轮廓的样式  常用值:solid(实线) ,dashed(虚线)
,double(双线)…

outline-color:定义轮廓的颜色

outline-width:定义轮廓的宽度 常用值:thin ,thick ,14px…

8.定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。

定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

常用属性:

position:把元素放置到一个静态的,相对的,绝对的,或固定的位置中。

absolute:绝对 相对于父元素

relative:相对  相对于自己应该出现的位置

fixed:相对于浏览器

top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量

right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移

left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移

bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

9.分类

CSS
分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。

 常用属性

 float:定义元素在哪个方向浮动

 clear:设置一个元素的侧面是否允许其它的浮动元素

 cursor:当指向某元素之上时显示的指针类型

 display:定义是否显示及如何显示元素  常用值 none和inline   消失

 visibility:定义元素是否可见或不可见。 常用值 hidden和visible占位隐藏

 

山不拒微土而成擎天之势,水不择细流终会汹涌之波!

css伪类用于向某些选择器添加特殊效果。

下面我们介绍一下锚伪类。

在支持css的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

 

a:link {color: #FF0000}         /* 未访问的链接 */

a:visited {color: #00FF00}     /* 已访问的链接 */

a:hover {color: #FF00FF}        /* 鼠标移动到链接上 */

a:active {color: #0000FF}       /* 选定的链接 */

奥门威尼斯网址,注意:

u  在 CSS 定义中,a:hover
必须被置于 a:link 和
a:visited 之后,才是有效的。

u  在 CSS 定义中,a:active
必须被置于 a:hover 之后,才是有效的。

u  伪类名称对大小写不敏感。

一.Css规则主要由两部分组成 1.选择器 2.一条或多条声明
a.选择器主要作用是为了确定需要改变样式的HTML元素…

前端:css,:css

 

 

一,css介绍

CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。

二,CSS语法

1,每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

奥门威尼斯网址 2

2,CSS的三种引入方式

 1)行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

2)内部样式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3)外部样式

外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

3,css选择器

1)基本选择器

  (1)元素选择器

p {color: "red";}

  (2)ID选择器

#i1 {
  background-color: red;
}

 

  (3)类选择器

.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}
#注意:

#样式类名不要用数字开头(有的浏览器不认)。

#标签中的class属性如果有多个,要用空格分隔。

  (4)通用选择器

* {
  color: white;
}

2)组合选择器

  (1)后代选择器

/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

  (2)儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

  (3)毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}

  (4)弟弟选择器

/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

3)属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

奥门威尼斯网址 3

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含(字符串包含)hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/
[title~="hello"] {
  color: green;
}

不怎么常用的属性选择器

不常用的选择器

4),分组与嵌套

  (1)分组

  当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 

div,
p {
  color: red;
}

  (2)嵌套

  多种选择器可以混合起来使用

.c1 p {
  color: red;
}

5)伪类选择器

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;

6)伪元素选择器

  (1)first-letter

常用的给首字母设置特殊样式:

p:first-letter {
  font-size: 48px;
  color: red;
}

  (2)before

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

  (3)after

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
} 

7)选择器的优先级

  (1)css继承

  继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。

  继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承

  (2)选择器的优先级

  内联样式权重:1000

  id选择器权重:100

  类选择器权重:10

  元素选择器权重:1

 

3,css属性相关

1)字体属性

(1)文字字体

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

(2)字体大小

p {
  font-size: 14px;
}

(3)字重

font-weight用来设置字体的字重(粗细)。

奥门威尼斯网址 4

(4)文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

  • 十六进制值 – 如: FF0000
  • 一个RGB值 – 如: RGB(255,0,0)
  • 颜色的名称 – 如:  red

还有rgba(255,0,0,0.3),第四个值为alpha,
指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。

 2)文字属性

  (1)文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

奥门威尼斯网址 5

  (2)文字装饰

 text-decoration 属性用来给文字添加特殊效果。

奥门威尼斯网址 6

常用的为去掉a标签默认的自划线:

p {
  text-indent: 32px;
}

  (3)首行缩进

p {
  text-indent: 32px;
}

3,)背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x:背景图片只在水平方向上平铺
 repeat-y:背景图片只在垂直方向上平铺
 no-repeat:背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top(20px 20px);

#简写:
background:#ffffff url('1.png') no-repeat right top;

奥门威尼斯网址 7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

鼠标滚动背景不动

4)边框

  (1)边框属性 

  • border-width
  • border-style
  • border-color

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}
#简写
#i1 {
  border: 2px solid red;
}

奥门威尼斯网址 8

奥门威尼斯网址 9

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

为某一边框设置样式

  (2)border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

  (3)display 属性

奥门威尼斯网址 10

display:”none”与visibility:hidden的区别:

visibility:hidden:
可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

display:none:
可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

5)css盒子模型

  • margin:          
     用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
  • padding:           用于控制内容与边框之间的距离;   
  • Border(边框):     围绕在内边距和内容外的边框。
  • Content(内容):   盒子的内容,显示文本和图像。

奥门威尼斯网址 11

 

   (1)margin外边距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

  (2)padding内填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

  (3)float

浮动元素会生成一个块级框,而不论它本身是何种元素。

关于浮动的两个特点:

  • 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

float三种取值:

  left:向左浮动

  right:向右浮动

  none:默认值,不浮动

  (4)clear

  奥门威尼斯网址 12

注意:clear属性只会对自身起作用,而不会影响其他元素。

  (5)父标签塌陷解决方法:

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

6)overflow溢出属性 

 奥门威尼斯网址 13

  • overflow(水平和垂直均设置)
  • overflow-x(设置水平方向)
  • overflow-y(设置垂直方向)

7)定位(position)

  (1)static

  static
默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。

  (2)relative(相对定位)  

  相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意:position:relative的一个主要用法:方便绝对定位元素找到参照物。

  (3)absolute(绝对定位)

  定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

  重点:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。

另外,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。

  (4)fixed(固定)

  fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性
定义。 注意点: 一个元素若设置了 position:absolute | fixed;
则该元素就不能设置float。这
是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流”。但是
relative 却可以。因为它原本所占的空间仍然占据文档流。

  在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。

  

一,css介绍 CSS( C ascading S tyle
S heet,层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表,它就会按照这个样式表来…

CSS的全称是什么?

英文全称:Cascading Style Sheets
中文全称:层叠样式表

CSS通常称为CSS样式表或层叠样式表,主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

CSS分类:
CSS代码插入的形式可以分为三种:分别是内联式,嵌入式,外部式。
<p style="color:red">直接写入标签内部,就做内联式

CSS有几种引入方式? link 和@import 有什么区别?

有 4 种方式可以在 HTML 中引入 CSS。
1.行内样式
  行内样式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
示例:<div style="background: red"></div>
  这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个
<div> 拥有相同的样式,你不得不重复地为每个 <div>
添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style
中的代码。很显然,行内样式引入 CSS 代码会导致 HTML
代码变得冗长,且使得网页难以维护。 
2.内部方式 
  内部方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
示例:

<head>
    <style>
    div{
        background: red;
    }
    </style>
</head>

内部方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML
文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看
HTML 结构和 CSS 样式。因为内部的 CSS
只对当前页面有效,所以当多个页面需要引入相同的 CSS
代码时,这样写会导致代码冗余,也不利于维护,一般用于个人自己写demo。

  1. 外部样式
      外部样式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS
    文件。
    示例:

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式,所有的 CSS
代码只存在于单独的 CSS 文件中,所以具有良好的可维护性。并且所有的 CSS
代码只存在于 CSS 文件中,CSS
文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。

  1. 导入样式
      导入样式指的是使用 CSS 规则引入外部 CSS 文件。
    示例:

<style>
    @import url(style.css);
</style>

方法3、4两者都是外部引用CSS的方式,但是存在一定的区别:

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。
综上所述,link的好处远远大于@import

2 CSS语法CSS基础语法

        span{
            color:red;
            }
    </style>````
把代码写在head里的style标签里面,就叫做嵌入式
`<link href="base.css" rel="stylesheet" type="text/css" />
`这种方式叫做外联式,也叫外部式

选择器
选择器的种类有有:标签选择器,类选择器,ID选择器,子选择器,包含选择器,通用选择器,伪类选择符,分组选择符。
其中比较值得注意的是子选择器和包含选择器的区别
子选择器的作用:用于选择指定标签元素的第一代子元素 .food>li
包含选择器的作用: 用于选择指定标签元素下的后辈元素 .food li
通用选择器 *
伪类选择器 a:hover{color:red;}
分组选择器 h1,span{color:red;}

CSS权重
当同一个标签设置了多个不同样式的时候,要看那个样式生效,这个时候是通过权值来判断的。如果权值一样,那么是通过顺序来判断,处于最后面的css样式会被应用。另外!important的权重是最高的,一般要写在分号前面。
![](http://upload-images.jianshu.io/upload_images/627120-07ef4befae839f5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

CSS设置字体
CSS设置的字体一般要为比较常用的字体,因为用户看到字体的样式取决于用户本地电脑是否安装了你设置的字体
body{font-family:"Microsoft Yahei";} 或者
body{font-family:"微软雅黑";}
但是第一种比第二种的兼容性更好一些。
实现粗体,很多人为了实现粗体样式都会使用h1-h6或strong标签,这样是不好的,CSS有单独实现粗体的方式。
p span{font-weight:bold;}

缩进样式
中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:
p{text-indent:2em;}

段落排版--中文字间距、字母间距
letter-spacing:50px; 字母间距
word-spacing:50px; 单词间距

段落排版--对齐
text-align 这个只能对块状元素使用
text-align:center;

元素分类:
在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素.

常用的块状元素有:
`<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>`
常用的内联元素有:
`<a>、、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>`
常用的内联块状元素有:
`<img>、<input>`

使内联元素转化为块状元素的方法:
a{display:block;}
使块状元素转化为内联元素的方法:
div{display:inline;}
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变


内联块状元素:
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素

inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒子模型:
内边距:padding
外边距:margin
边框:border
块状标签都具备盒子模型的特征



CSS布局模型
CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)

流动布局模型具有2个比较典型的特征:
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

流动布局两句话概括:块状元素从上到下分布,内联元素从左到右分布

浮动模型(Float)
设置浮动后可以是块状元素水平排列


层模型有三种形式:
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

层模型--绝对定位(position: absolute)
对于其最接近的一个具有定位属性的父元素进行绝对定位。如果没有这样的父属性,就居于body来绝对定位。

层模型--相对定位(position: relative)
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动。


> 需要注意的点: 虽然div元素相对于以前的位置产生了偏移,但是div元素以前的位置还是保留着,所以后面的span元素是显示在了div元素以前位置的后面。简单来说,就是相对定位之后,不会影响其他元素的排列。如下图显示:

![](http://upload-images.jianshu.io/upload_images/627120-aca355d8ebca722c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/627120-62c8e1711aaae818.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

层模型--固定定位(position: fixed)
表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身


Relative与Absolute组合使用
这个方法才是最常用的方法,将父盒子设置为(position: relative),需要定位的盒子设置为(position: absolute),可以实现相对于父盒子的绝对定位

1、如果top、right、bottom、left的值相同,可简写为下面代码:
    margin:10px;
2、如果top和bottom值相同、left和 right的值相同,可简写为下面代码:
    margin:10px 20px;
3、如果left和right的值相同,可简写为下面代码:
    margin:10px 20px 30px;

>需要注意的点:
top和bottom的值相同,left和right的值不相同,这种方式是没有简写的。


颜色值缩写:
p{color:#000000;}缩写为p{color: #000;}
p{color: #336699;}缩写为p{color: #369;}


字体缩写:
body{
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:"宋体",sans-serif;
}
缩写为
body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。


CSS中的长度值:
长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。

1、像素
像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。

2、em
就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:
p{font-size:12px;text-indent:2em;} 可以实现段落首行缩进 24px,也就是2个字体大小。

>值得注意的点是:当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。

3、百分比
p{font-size:12px;line-height:130%}
设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。


水平居中显示:
1.如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的

2.当被设置元素为块状元素
当被设置元素为块状元素时,用text-align:center就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。

如果是宽度固定的块状元素,用以下代码可以实现水平居中:
width: xpx; margin:xpx auto;

如果不定宽块状元素方法,比如分页,分页是不确定的,所以不能设置宽度。这种情况有三种方式解决:
1.加入 table 标签
2.设置 display;inline 方法
3.设置 position:relative 和 left:50%;

第一种方法如下:
第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)


第二种方法如下(个人比较喜欢这种方式):
改变块级元素的 display 为 inline 类型,然后对其父元素使用 text-align:center 来实现居中效果

第三种方法如下:
方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。

垂直居中:
父元素高度确定的单行文本的垂直居中的方法是通过设置父元素的height和line-height高度一致来实现。

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。
css代码:
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

方法二:在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。


>当行内元素设置了以下2个属性元素,元素就会从行内元素变为内联块状元素display:inline-block
position : absolute
float : left 或 float:right
比如a标签,设置了上面2个属性中的任何一个,就隐形变成内联块状元素了,也就可以设置宽度了。

以下这几种文件路径分别用在什么地方,代表什么意思?

css/a.css为相对路径,代表与当前目录下的css目录下的a.css文件
./css/a.css为相对路径,等价于css/a.css,其中./等价于当前目录
b.css为相对路径,代表当前路径下的b.css文件
../imgs/a.png为相对路径, 代表当前目录的上一级目录下的imgs目录下的a.png文件
/Users/hunger/project/css/a.css为绝对路径,代表本地文件夹下a.css文件地址
/static/css/a.css为网站路径,当前服务器根目录下的/static/css的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png为网站路径,http://cdn.jirengu.com/kejian1/8-1.png网络路径下的文件

CSS规则由两个主要部分构成:选择器以及一条或多条声明。每条声明由一个属性和一个值组成。属性(property)是设置的样式属性,每个属性有一个值,属性和值被冒号分开。

如果我想在js.jirengu.com上展示一个图片,需要怎么操作?

  1. 把本地图片上传至某网站(图床),生成一个线上地址,然后在js.jirengu.com中加载
  2. 在本地打开服务器,通过localhost加载这个图片。再将图片放在js.jirengu.com(自己测试时可这样使用)
比如 selector{property:value}

列出5条以上html和 css 的书写规范:

选择器通常是需要改变样式的HTML元素。

html

  • 一定要闭合HTML标签
  • 声明正确的文档类型(DocType)
  • 不要使用内联样式
  • 使用小写的标签名
  • 同一页面,应避免使用相同的 name 与 id重名
  • 标签使用必须符合标签嵌套规则
比如h1{color:red;font-size:14px;}h1是选择器,color和font-size是属性,red和14px是值。

css

  • 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字-
    符。
  • 选择器 与 { 之间必须包含空格
  • 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格
  • 列表型属性值 书写在单行时,, 后必须跟一个空格
  • 每行不得超过 120 个字符,除非单行不可分割
  • 对于超长的样式,在样式值的 空格 处或 , 后换行,建议按逻辑分组
  • 当一个 rule 包含多个 selector
    时,每个选择器声明必须独占一行 >、+、~ 选择器的两边各保留一个空格
  • 属性选择器中的值必须用双引号包围
  • 属性定义必须另起一行
  • 属性定义后必须以分号结尾
  • 如无必要,不得为 id、class 选择器添加类型选择器进行限定
    还有一个更健全的css规范,可自行查阅

注意:如果定义不止一个声明则需要用分号将每个声明分开。例如:p{text-align:center;color:red}如果值为若干单词,则要给值加引号:
例如:p {font-family: “sans serif”;}

截图介绍 chrome 开发者工具的功能区

奥门威尼斯网址 14

chrome开发者工具

  1. Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
  2. Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell。
  3. Sources:断点调试JS。
  4. Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。
  5. Timeline:记录并分析在网站的生命周期内所发生的各类事件,以此可以提高网页的运行时间的性能。
  6. Profiles:如果你需要Timeline所能提供的更多信息时,可以尝试一下Profiles,比如记录JS
    CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
  7. Application:记录网站加载的所有资源信息,包括存储数据(Local
    Storage、Session Storage、IndexedDB、Web
    SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。
  8. Security:判断当前网页是否安全。
  9. Audits:对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

web开发调试用的最多的就是Elements、Console、Sources、Network

CSS高级语法

选择器的分组

h1,h2,h3,h4,h5,h6 { color: green;}

继承及其问题:根据 CSS,子元素从父元素继承属性。

body { font-family: Verdana, sans-serif;}

3 创建CSS

CSS 创建样式表分为三种情况:

内部样式表

head style type="text/CSS" 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} div{width:200px; height:200px; border:1px solid red;} /style/head

行内式(内联样式)

div/div

外部样式表(外链式)

head link rel="stylesheet" type="text/css" href="css/style.css"/head

样式优先级:内联样式内部样式外部样式

三种样式表区别:

样式表 优点 缺点 使用情况 控制范围 行内 书写方便 没有实现样式和结构相分离 较少 控制一个标签(少)内部 部分结构和样式相分离 没有彻底分离 较多 控制一个页面(中)外部 完全实现结构和样式相分离 需要引入 最多,推荐 控制整个站点(多)

4 id和class选择器ID选择器:

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,id
属性和身份证一样具有唯一性。HTML元素以 id 属性来设置 id 选择器,CSS 中
id 选择器以 “#” 来定义。注意: id 属性不能以数字开头。

语法: #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

class选择器:

class 选择器用于描述一组元素的样式,也叫做类选择器。class
可以在多个元素中使用,并且一个元素也可以指定多个类名。在 CSS
中,类选择器以一个点 “.”
号来定义。同样的类名的第一个字符也不能使用数字。

语法: .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

ID 选择器和类选择器的区别:

相同点:

都可以应用于任何元素

不同点:

ID
选择器只能在文档中使用一次,而类选择器可以使用多次。可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名),而ID只能指定一个。5
CSS元素选择器

最常见的CSS选择器就是元素选择器,也就是标签选择器,也就是在HTML中元素的最基本的选择器。

语法: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

6 CSS背景(background)

background 属性用于定义 HTML 元素的背景。定义元素背景效果的 CSS
属性有五种:

background-color 背景颜色background-image 背景图像background-repeat
背景图像设置水平或垂直平铺或不平铺background-position
背景图像设置定位background-attachment 背景图像设置固定或滚动

背景属性简写:

body{ background:green url('images/fix.gif') no-repeat fixed 12px 24px; }当使用简写属性时,属性值的顺序依次为: background-color -- background-image -- background-repeat -- background-attachment -- background-position

7 CSS外观属性

CSS文本格式主要分为:文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。

文本对齐方式:text-align属性有四个值:left,center,right,justify(两端对齐)。属性默认值为auto。

文本修饰:text-decoration
属性用来设置或删除文本的修饰。主要是用来删除超链接的下划线,也可以使用其他值来设置文本的修饰。text-decoration:overline,
设置文本上划线。text-decoration:line-through,
设置文本中间划线。text-decoration:underline, 设置文本下划线。

文本阴影:text-shadow: x y shadow color;其中 x
是水平阴影的偏移值,y 是垂直阴影的偏移值,shadow
用于指定阴影的模糊值,即模糊效果的作用距离,不允许负值。color
指定阴影的颜色。该属性有两个作用,产生阴影和模糊主体。

文本缩进:用来指定文本的首行缩进,允许为负值,如果值是负数,第一行则向左缩进。CSS表示为:text-indent:2em,em
是相对文字大小的单位,1em 就是1个文字大小,2em 就是两个文字大小。

文本间距:行高,也就是文本行的高度。例如:line-height:22px;

字间距:letter-spacing 和 word-spacing
这两个属性都可用来增加或减少文本间的空白,即字间距。不同的是:letter-spacing
属性设置字符间距,而 word-spacing
属性设置单词间距。注意:word-spacing
属性对中文无效,因此在设置中文的字间距时请使用 letter-spacing
属性。letter-spacing 和 text-align:justify
是两个冲突的属性,不能同时使用;text-align:justify
是设置内容根据宽度自动调整字间距,使各行的长度恰好相等,实现文本两端对齐效果,而
letter-spacing 是指定一个固定的字间距。

文本空白处理:white-space 属性指定元素内的空白如何处理,默认值为
normal 空白会被浏览器忽略。该属性还有4个值:nowrap
文本不会换行,禁止换行,文本会在同一行上继续,直到遇到br/ 标签为止。pre
空白会被浏览器保留,这种方式类似 HTML 中的 pre
标签,用于定义预格式文本。pre-wrap
指定保留空白符序列,但是正常地进行换行。pre-line
指定合并空白符序列,但是保留换行符,并允许自动换行。

文本转换:text-transform
属性控制文本中的字母。是用来指定在一个文本中的大写和小写字母,可用于将所有字句变成大写或小写字母,或每个单词的首字母大写。text-transform:capitalize;
定义文本中的每个单词以大写字母开头。text-transform:uppercase;
定义文本仅有大写字母。text-transform:lowercase; 定义文本仅有小写字母。

8 CSS字体 (font)

font
属性可用于设置文本字体,定义样式,如加粗,大小等,属于复合属性,也叫做简写属性。简写顺序:font-style(字体样式)
— font-variant(字体变形) — font-weight(字体加粗) —
font-size(字体大小)/line-height —
font-family(设置文本字体)注意,font-size 和 font-family
的值是必需的,否则无效。

(1)是绝对或相对大小,可以使用px、em、%和em组合来设置。

使用px设置:通过像素设置文本大小是设置的整个页面。使用em设置:1em等于当前的字体尺寸,比如设置的默认字体是12px,因此1em的默认大小就是12px。像素转换em:px/12
= em使用%和em组合设置:在所有浏览器的解决方案中,设置 body
元素的默认字体大小是
100%,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。

head style body{font-size:100%} p{font-size:2.5em; } /* 2.5*16=40px */ /style/headbody p使用%和em组合设置/p/body

(2)font-style 属性主要用于指定斜体文字。属性有三个值:

normal正常显示文本italic 定义斜体oblique 定义倾斜的文字9 CSS链接

链接的四种状态是:

a:link – 正常,未访问过的链接。a:visited – 已访问过的链接。a:hover –
当鼠标滑动到链接上时。a:active – 链接被点击的那一刻。10 CSS列表

作用:1 设置不同的列表项标记 2 设置列表项标记为图像修改列表项标记使用
list-style-type,使用图像作为标记可以利用 list-style-image 属性完成。

无序列表:

无序列表经常用来做导航栏菜单,通常都需要隐藏无序列表项的标记,那么就使用
list-style-type:none,表示无标记。list-style-type 属性的默认值为 disc
实心圆,即小黑点。除了无标记还可以修改标记,例如circle空心圆,square实心方块。

有序列表:

有序列表项标记默认使用数字样式显示,即 list-style-type:decimal。

图像作为列表项标记

要指定列表项标记的图像,可以使用 list-style-image
属性,只需要简单地设置一个 url() 值,就可以将图像作为标记类型。

列表属性简写:list-style:list-style-type,list-style-position,list-style-image;

11 CSS表格

表格边框: border表格宽度和高度:width 和 height表格对齐:text-align 和
vertical-align表格内边距:tr,td的padding设置

head style #tab{ width:50%; font-family:"微软雅黑"; /*设置是否将表格边框合并为单一线条的边框*/ border-collapse:collapse; } #tab th,#tab td{ /*表格边框*/ border:1px solid #7AC942; /*表格内边距*/ padding:5px 10px; } #tab th{ color:white; background-color:#9C3; font-size:1.125em; /*左对齐*/ text-align:left; padding-top:4px; padding-bottom:8px; } #tab .list td{ /*边颜色*/ color:#000; /*背景颜色*/ background-color:#FFC; } caption{ margin-bottom:10px; font-weight:bold; } /style/headbody table  caption食物类别/caption thead tr  th粗粮/th th蔬菜/th th水果/th /tr /thead tbody tr td大豆/td td黄瓜/td td香蕉/td /tr tr  td高粱/td td菠菜/td td柠檬/td /tr tr  td燕麦片/td td白菜/td td西瓜/td /tr /tbody /table/body

12 CSS 选择器分组和嵌套选择器分组选择器,例如:

h1{color:gray;}p{color:gray;}可以写成:h1, p{color:gray;}

嵌套选择器,例如:

.div1 p{ color:white;}.div1 p a{ color:yellow; font-weight:bold;}div  p嵌套选择器 a href="#"深层嵌套选择器/a /p/div

通配符选择器

*{ padding:0; margin:0;}

属性选择器属性选择器:属性选择器使用[attr],例如:把所有带有 title
属性的元素的字体设置为红色

head style [title]{ color:red; } /style/headbody h1h1 标题不带有 title 属性/h1 h2 title="标题"h2 可以设置样式/h2 a href="#" title="链接"超链接可以设置样式/a/body

属性和值选择器:属性选择器使用[attr=value]

 head style [title=Hello]{ color:blue; } /style /head body h1 title="Hello world"h1 标题 title="Hello world"/h1 h2 title="Hello"h2 可以设置样式/h2 a href="#" title="Hello"超链接可以设置样式/a /body

属性和多个值的选择器:使用有两种情况:属性值用空格分隔使用:[attr~=value]属性值用连字符分隔则使用:[attr|=value]

例如:把包含 title=’Hello’ 的元素的字体设置为绿色,使用 ~ 分隔属性和值

 head style [title~=Hello]{ color:green; } [lang|=zh]{ color:gray; } /style /head body h1 title="world"h1 标题 title="world"/h1 h2 title="Hello"h2 可以设置样式/h2 h3 title="Hello Web"h3 可以设置样式/h2 a href="#" title="Hello world"超链接可以设置样式/a a href="#" lang="zh-TW"超链接可以设置样式/a /body

表单样式:属性选择器在为不带有 class 或 id
的表单设置样式时特别有用。例如:

 head style input[type="text"]{ width:150px; display:block; margin-bottom:5px; background-color:yellow; } input[type="button"]{ width:120px; margin-top:5px; background-color:green; } /style /head body form name="input" action="demo.php" method="get" 用户名:input type="text" name="user" placeholder="请输入登录名" 昵 称:input type="text" name="name" placeholder="请输入角色名" input type="button" value="查询" /form /body

3
组合选择器:合选择符是包括各种简单选择器的组合方式,组合选择符说明了两个选择器直接的关系。后代选则器:又称为包含选择器,以空格分隔,子元素选择器只能选择作为某元素子元素的元素。子元素选择器:子元素选择器只能选择作为某元素子元素的元素,以
分隔,子元素选择器只能选择作为某元素子元素的元素。相邻兄弟选择器:可选择紧接在另一元素后的元素,且二者有相同父元素,以

  • 分隔。普通相邻兄弟选择器:选取所有指定元素的相邻兄弟元素,以 ~
    分隔。选择器组合:多种选择器可以结合起来使用。13
    CSS伪类(不区分大小写)

CSS 伪类是用来向一些选择器添加特殊的效果。

语法:选择器:伪类{attr:value;} CSS 类也可以使用伪类:选择器.class:伪类{attr:value;}

(1)超链接伪类

在浏览器中,链接的不同状态都可以以不同的方式显示:

a:link{color:#FF0000;} /* 未访问的链接显示为红色 */a:visited{color:#00FF00;} /* 已访问的链接显示为绿色 */a:hover{color:#FF00FF;} /* 鼠标划过链接显示为紫红色 */a:active{color:#0000FF;} /* 已选中的链接显示为蓝色 */

注意: 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited
之后,a:active 必须被置于 a:hover 之后,才是有效的。

(2)伪类和 CSS 类(伪类可以与 CSS 类配合使用)(3)CSS2 – :first – child 伪类

 body p第一个 p 元素/p p第二个 p 元素/p p第三个 p 元素/p /body

选择作为任何元素的第一个子元素 p。选择器使用 p:first-child。选择所有 p
元素中的第一个子元素 b。选择器使用
pb:first-child。选择所有作为第一个子元素 p 中的所有 b 元素。选择器使用
p:first-child b。

(4)CSS2 – :lang 伪类

使用 :lang 伪类可以为不同的语言定义特殊的规则:

 html:lang(zh-CN){ color:blue; } :lang(en)p{ color:gray; }

14 CSS 伪元素

CSS 伪元素是用来为一些选择器添加特殊的效果。

语法:选择器:伪元素{attr:value;}

CSS 类也可以使用伪元素:选择器.class:伪元素{attr:value;}

(1)CSS2 – :before 伪元素

 h1:before{ content:url(images/logo.gif); }

(2)CSS2 – :after 伪元素

 h1:after{ content:url(images/logo.gif); }

content 属性与 :before 及 :after
伪元素配合使用,来插入生成内容,该属性用于定义元素之前或之后放置的生成内容。content
的内容一般可以为四种:

content:none 该值是默认值,不插入内容。content:”string”
插入文本。content:attr(属性) 插入标签属性值。content:url(路径)
使用指定的绝对或相对地址插入一个外部资源,可以是图像,音频,视频或浏览器支持的其他任何资源。15
块级元素和行内元素

块级元素(block-level):每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块元素有h1~h6、p、div、ul、ol、li等,其中div标签是最典型的块元素。

块级元素特点:总是从新行开始高度,行高,外边距以及内边距都是可以控制的宽度默认是容器的100%可以容纳内联元素和其他块元素

行内元素(inline-level):不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置高度,宽度,对齐等属性,常用于控制页面中文本的样式。

常见的行内元素有a/、strong/、b/、em/、ii/、del/、s、ins、u、span等,其中span标签最典型的行内元素。

行内元素的特点:和相邻行内元素在一行上。高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。默认宽度就是它本身内容的宽度。行内元素只能容纳文本或则其他行内元素。

注意

只有文字才能组成段落,因此p里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,

它们都是文字类块级标签,里面不能放其他块级元素。

链接里面不能再放链接。16 行内块元素(inline-block)

在行内元素中有几个特殊的标签——img /、input
/、td,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。

行内块元素的特点:和相邻行内元素在一行上,但是之间会有空白缝隙。默认宽度就是它本身内容的宽度。高度,行高、外边距以及内边距都可以控制。17
CSS 三大特性
层叠、继承、优先级

CSS层叠性:是指多种CSS样式的叠加。CSS继承性:是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。简单理解就是:
子承父业。CSS优先级:定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。使用了
!important声明的规则。考虑权重时,需要注意的一些点:

继承样式的权重为0。行内样式优先。权重相同时,CSS遵循就近原则。18
盒子模型
CSS三大模块: 盒子模型 、浮动 、定位。

盒子模型:就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。盒子边框

语法:border : border-width || border-style || border-color 常用属性值:none:没有边框即忽略所有边框的宽度、solid线(单实线)、dashed(虚线)、dotted(点线)、double(双实线)

19 实现居中

1 外边距实现盒子居中满足两个条件:

必须是块级元素。盒子必须指定了宽度

然后给元素左右的外边距都设置为auto。

例如:.header{width:960px;margin:0auto;}

2 文字盒子居中

文字水平居中是 text-align: center盒子水平居中 左右margin 改为 auto20
盒子模型布局稳定性

按照优先使用宽度 、其次 使用内边距、再次 外边距。width padding
margin原因

margin 会有外边距合并 还有 ie6下面margin
加倍的bug,所以最后使用。padding 会影响盒子大小, 需要进行加减计算
其次使用。width 没有问题,我们经常使用宽度剩余法 高度剩余法来做。21
盒子阴影

语法: box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;

22 浮动(float)CSS的定位机制有3种:普通流、浮动和定位。

浮动:是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。语法:选择器{float:属性值;}
属性值可以是left,right,both,none。目的:为了让多个块级元素同一行上显示。

23 定位(position)position 属性值分为四种:

-static:自动定位,所谓静态位置就是各个元素在HTML文档流中默认的位置。

relative:相对定位,相对定位是将元素相对于它在标准流中的位置进行定位absolute:绝对定位,相对于其上一个已经定位的父元素进行定位fixed:固定定位,相对于浏览器窗口进行定位。它的特点在于它的元素跟父亲没有任何关系,只认浏览器;

完全脱标,不占有位置,不随着滚动条滚动。

叠放次序z-index的特点:z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。如果取值相同,则根据书写顺序,后来居上。后面数字一定不能加单位。只有相对定位,绝对定位,固定定位有此属性,其余标准流,浮动,静态定位都无此属性,亦不可指定此属性

发表评论

电子邮件地址不会被公开。 必填项已用*标注