CSS 基本知识

java12345678

浏览: 339117 次
性别:
来自: 沈阳

最近访客更多访客>>

Franciswmf

cpongo1

java1234567

飘逸的霸地刺客

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

HTML示例：

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8"/>
   <tile>A HTML TEMPLATE </title>
</head>
<body>
  <!--这里是网页内容-->
</body>
</html>

块级元素：（display:block）

每个块级元素占一行，多个块级元素上下堆叠显示，它的宽度默认为父元素的宽度,高度由它的内容高度决定（内容撑开）

块级元素有：

<h1>--<h6> 6级标签

<p>:段落

<ol>：有序列表

<li>：列表项

<div>等等

行内元素：(display:inline)

多个行内元素在一行内显示，当同一行宽度不够时，才到下一行显示，它的宽度一般为内容宽度，高度为内容的高度。

行内元素有：

<a> 链接，

<img> ：图片

<em>:斜体

<span>等等

HTML 中多个连续空格，浏览器会解析成为一个空格，即多余的不显示。

CSS

1.css引用方式：

页面引用CSS的方式：

1.行内样式

<p style="color:red">hello my friends!</p>

2.嵌入样式

<html>

<head>

color:red;

}

</style>

</head>

</html>

3.链接样式

<html>

<head>

</head>

</html>

css优先级：行内样式>嵌入样式>链接样式

2.css 写法

选择器1[,选择器2][,选择器3][.....] {css属性名:属性值;[css属性名:属性值;[css属性名:属性值;][...........]}

[]表示可选项

选择器：用某种规则来选择想要应用css的dom元素。（找到元素）

{....}花括号：对dom元素（找到的）应用于何种CSS样式来改变其显示外观，因此花括号里是css声明。

{}花括号内是用分号分隔的多个css属性声明(由属性名：属性值组成)

举例：

p { color:red;} /*一个元素应用css样式*/

p ,h1 ,h3 { color : red; font-size : 12px} /*一组（多个）元素应用CSS样式。

3.选择器分类

基本选择器：

元素选择器：直接用元素名表示

格式：元素名

如 p { background-color:red} p元素的背景为红名

类选择器（.className）：

格式: .类名由点+类名表示,需要在dom元素的 class属性中引用才生效

.red-bg { background-color:red } 。

<p class="red-bg">hello my friends!</p>

可以在N个dom元素中引用。

ID选择器(#ID名)

#descId { background-color:red} ,由井号+id名称表示，需要在dom元素的 ID属性中引用才生效。

<p id="descId">hello my friends!</p>

只能在一个dom元素中引用。

属性选择器

格式：元素名[属性名 [关系符属性值]][属性名 [关系符属性值]] ...

关系符可以是：

=等于属性值，

~= 属性有多个值，其中一个值等于属性值

^= 以属性值开头

$=以属性值结尾

*= 包含属性值

伪类选择器：

格式：元素名：伪类名

示例：a:link a:visited a:hover a:active,input:focus,e:first-child,e:last-child,e:nth-child(n|odd|even) 等

伪元素选择器：

格式：元素名：：伪元素名

示例：e::first-letter,e::first-line,e::before,e::after,

复合选择器：

设第一个基本选择器选择的DOM元素为 E,第二个基本选择器选择的DOM元素为 F,

后代选择器：格式：第一个基本选择器空格第二个基本选择器， F为E的后代（含子，孙子...）则F为需要应用CSS的元素。
子选择器：格式：第一个基本选择器 > 第二个基本选择器，F为E的儿子，则F为需要应用CSS的元素。
兄弟选择器：格式：第一个基本选择器 + 第二个基本选择器，F与E同层级且紧邻E之后，则F为需要应用CSS的元素。
同胞选择器：格式：第一个基本选择器 ~ 第二个基本选择器，F与E同层级且在E之后，则F为需要应用CSS的元素。
相交选择器：格式：第一个基本选择器第二个基本选择器（写法：两个选择器挨着，中间无其它字符。），E和F的交集dom元素，为需要应用CSS的元素。

css属性继承：

可继承的CSS属性有：跟文本相关的CSS等，这些CSS属性值可由父元素或祖先元素继承而来。

CSS 层叠规则：

当一个元素的一个CSS属性，有多个CSS定义，且定义值都不相同时，哪个CSS定义生效呢？

1.属性声明中有！important 时，该属性声明有效。

如 p {color:red !important}

2.其它情况，需根据I-C-E 规则判断

I:指ID选择器，有一个ID选择器，则在I上加1

C:指类选择器，有一个类选择器，则在C上加1

E:指元素选择器，有一个E选择器，则在E上加1.

最终生成类似 0-1-3 之类的两个数值串，相互比校：I值大的生效，相同则对C值，C值相同则对比E值。

如果两个数值串完全相同，则后声明生效。

简单说：选择器最明确的那个生效。

css盒模型：

左右相邻元素，相邻的外边距距离：第一个元素的右外边距+第二个元素的左外边距

上下相邻元素，相邻的外边距距离：上面元素的下外边距和下面元素的上外边距，哪个最大取哪个

未指定宽度情况下：总宽度不变==父元素的宽度，增加margin、border、padding宽度时，内容宽度会缩小。

指定宽度的情况下：width == 内容宽度，增加margin、border、padding宽度时，总宽度会增加。

通过 box-size

CSS浮动：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

格式： float:left|right

浮动框旁边是文本或之后是P元素，则形成环绕效果。

当浮动框的不在文档的普通流中，也就撑不开父元素。解决办法是为父元素添加clear属性的css:

.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容；

content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。

display: block; <----加入的这个元素转换为块级元素。

clear: both; <----清除左右两边浮动。

visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；

line-height: 0; <----行高为0；

height: 0; <----高度为0；

font-size:0; <----字体大小为0；

}

clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框即下一行显示。

上面的CSS表示内容为.的块元素，不紧挨着浮动框，即在浮动框下方，由于该块元素是正常文档流的一部分，被包含在父元素中，所以它之上的浮动框自然也显示在父元素中。

CSS定位：

position 有4个值：static(静态定位),relative(相对定位),absolute（绝对定位）,Fixed(固定定位)

static(静态定位)：页面默认的定位形式，块级元素从上到下排列，每个块级元素占用一行，宽度为父元素宽度。

relative(相对定位)：块元素会发生位置偏移，偏移是相对于原来位置，偏移多少由 top left right bottom 决定，元素原位置保留，即其它元素不可占用该位置。

absolute（绝对定位）：块元素会发生位置偏移，偏移是相对postion为（relative,absolute,fixed）的最近的祖先元素（如果没有，则相对于body），偏移多少由 top left right bottom 决定，元素原位置删除，其它块元素会占用该位置。

Fixed(固定定位)：类似于将 position 设置为 absolute，但偏移是相对于视窗本身。它不会随页面滚动而移动。

查看图片附件

分享到：

HTML特殊字符表（转） | CSS样式覆盖规则（转）

2016-01-04 11:00
浏览 557
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论