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

最新推荐文章于 2024-09-15 00:30:13 发布

佳慧在路上

最新推荐文章于 2024-09-15 00:30:13 发布

阅读量545

点赞数

分类专栏：学习笔记新手上路之网页前端学习文章标签：前端 css

本文链接：https://blog.csdn.net/liujiahuiUSTB/article/details/51095726

版权

学习笔记同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

新手上路之网页前端学习

6 篇文章 0 订阅

订阅专栏

前端学习之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>
不过不优先选择这种不易于长期维护的方式。
最后，一般在样式的设置中遵从“后面的优先”这一规则。