初识CSS,基础选择器

最新推荐文章于 2024-09-21 23:59:03 发布

qq1370234

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量94

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq1370234/article/details/109517839

版权

初识CSS

CSS全称 Cascading Style Sheet（层叠样式表）
HTML：规定网页上有什么内容。
CSS：规定网页上这些内容的样式。

使用 HTML写样式的缺点：
1.代码比较臃肿。
2.可读性比较差。
3.不便于维护。
4.对搜索引擎不友好，搜索引擎更关心内容

使用 CSS写样式的优点：
1.代码比较简洁
2.可读性比较强
3.便于维护
4.更关心内容，对搜索引擎比较友好。

如何去使用CSS
基础语法：
选择器{
属性：属性值；（声明）
属性：属性值；
}
选择器：选择页面中哪些元素去做样式的修改。
声明：要做什么样的样式修改。
声明：都是由属性和属性值组成的。中间用：，以分号结尾。
css对缩进和空格不敏感，咱们可以通过合理的缩进来提高代码的可读性。

CSS分为五类：文本，盒子，浮动，定位，背景。
文本：字体，大小，颜色。
盒子：宽，高，背景色，边框。

CSS书写位置分为：行内式，内嵌式，外链式，导入式。
行内式写法直接写在标签style属性中
行内式： 写法简单。
缺点： 1.结构和样式没有分离。
2.只对当前的标签生效。不能够复用。
开发中不推荐使用。
内嵌式：
写法：在这里插入代码片 <style> ..... </style> 使用style标签，在head标签内。
css属性写在style标签内
缺点：
1.如果样式比较多，页面代码会比较多。
2.只对当前页面生效。如果说多个页面有共同的样式，需要写多次。
优点：
结构和样式分离。
样式可以复用。
外链式：
写法：
在这里插入代码片<link rel="stylesheet" href="css/demo.css">通过link标签，引入外部的css文件。
优点：
结构和样式分离。
样式可以复用。
可以多个页面使用。
导入式：
写法：

在这里插入代码片<style>
   @import url(css/demo.css);
 </style>

外链式：会先加载css，再去加载HTML页面。
导入式：会先加载HTML页面，再加载css。
不推荐使用导入式，使用最多的是外链式。

基础选择器

选择器：选择页面上的元素进行样式的修改。

标签选择器：
通过标签名来选择相应的标签。
会选择页面中所有的相应标签，不管嵌套关系是怎么样的。
用途：a标签，li标签。利用标签选择器，进行默认样式的初始化。
因为标签选择器会选择页面中所有的相应标签，实际工作中，不会用来更改某一个标签的样式。

ID选择器：
通过给标签设置一个ID值，然后通过这个ID值来选择标签。
写法：

在这里插入代码片  #id{
    声明；
  }

一个页面中ID值是唯一的，ID选择器只会选择一个标签。
id值的写法规范：以字母开头，后面可以是数字，下划线或横线。
痛点：
假如有多个标签，有同样的样式，使用ID选择器的时候，需要分别给他们设置ID值，然后再重复的设置一样的样式。
id常用场景：不是用来设置样式，配合js去添加事件的。

类选择器
通过标签的class属性来选择相应的标签。
class值是可以重复的。
写法：