您的位置：首页 > Web前端 > CSS

前端学习之CSS基础知识（2）

2016-04-08 13:11 603 查看

前端学习之CSS基础知识（2）

如果把网站比作一个城市的话。规划它的方式就是，先用div或者其他标签把他们分块，每一块可以使用属性来定义他们的名字等，从而将它们区分开。最后用CSS来控制他们——所谓的div布局，CSS控制。

例：布局首页。

div id=”container “指总的div

然后设置 id=”header” id=”left”id=”right” 等等等的div，也就是网页设置成若干块。

下面是一个简单的使用CSS来控制div的例子

<style>
#ID{
width:100px;
height: 200px;
background:green;
float: right;
}
</style>

注：ID是设置的div的id；float 有漂浮之意，普通的块是每个占一行的。用float就可以让多个在一行；与float相反的有clear。清除之意，不允许有浮动的元素在它上面。

如何定义选择器？

（选择器：表示将样式规则应用于哪些元素，也就是下文大括号前面的部分）有如下五种形式

1. h1{color:red;} 元素的名称或者类型

2. h1 em {color:red;} 元素所在的上下文（h1元素中的em）

3. error{color:red;} 元素的类class=error #ID{color:red;} 元素的ID

strong.error{color:red;} error中的strong元素，一般不使用（后面的是类）

4. a:link{color:red;} 元素的伪类或者伪元素。

5. a[little]{color:red;} 元素是否有某些属性或者值

a[href=”url”]{color:red;} 方括号中间的是属性，等号后面的是值。

提示：确定选择器时。CSS的复用性很重要，所以避免使用id选择器是明智的，但id选择器也有其他的用处（锚等）

选择器也并非如此简单，除下这些基本的样子，它还有许多变化的形式，

对第4条的一些备注：伪元素：HTML里不存在的元素（::first-line ::first-letter ::before ::after）

伪类：应用于一组HTML元素。（用单冒号表示）

以链接为例，访问者的行为控制链接的状态，而不是在代码中体现。此时用伪类可以获取链接的状态。

a:xxx{里面通常会设置color的值}

xxx可以用下面的来代替，顺序也保持一致，因为后面的规则会覆盖前面的规则

link（未访问过） visited（访问过的） focus（获得焦点时） hover（鼠标悬停时） active（激活链接时）

对第5条的一些备注：属性a[little]指的是匹配little属性。但是little属性很多时，会给little设置一个值

这样就可以进一步指定具有某些值的属性如下[little=”value”]中等号可以有下面几种替换

~= （有value这个单词）|= (以value-打头)^=(以value开头)$=（以value结尾）*=（value的子字符串）

这些灵活运用后，会取得很好的效果。

如何操作样式表

1.使用CSS最好的方式应该是先创建外部样式表，然后再链接到外部样式表

即使用

2.当然也可也直接内嵌于head部分

如

<head> <style> h1{color:red;} </style> </head>

3.也有内联到

<body>  </body>

中在标签中使用

如

<h1 style="float: right;"></h1>

不过不优先选择这种不易于长期维护的方式。

最后，一般在样式的设置中遵从“后面的优先”这一规则。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航