什么是css,css选择器简介

原创 国哥笔记  2019-03-18 10:16  阅读 324 views 次

什么是CSS

css是 Cascading(层叠 )Style(样式) Sheet(表)的简称,及层叠样式表,CSS技术用来美化html页面,html相当于盖房子,CSS相当于装修,使用CSS可以把样式代码和html分离

html页面中引入css的方式

1、内联样式:在标签的style属性中引入css,不推荐使用,不能复用

<div style="color: red; border: 1px solid blue">我是一个div</div>

2、内部样式:通过style标签引入CSS,可以在当前页面复用,学习时经常使用,工作中不推荐使用,因为不能多页面复用

<style type="text/css">
h2{color: purple; background-color: green;}
</style>

3、外部样式:通过link标签引入外部css样式文件,可多页面复用,推荐工作中使用,需要单独创建样式文件

<link rel="stylesheet" href="first.css">

优先级(多种引入方式操作同一个标签,以哪个为准)

  1. 内联优先级最高
  2. 内部和外部同时存在,则就近原则
  3. 标签默认效果优先级最低

选择器

选择器可以帮助我们选中需要添加样式的标签

1、标签名选择器:通过标签的名称找到指定标签

格式:元素名{ }

2、类选择器:通过标签的class属性值选中指定标签,多个标签可以有相同的class值

格式:.d1{ }

3、id选择器:通过id找到标签,一个html文件中id不能重复

格式: #id{}

4、派生选择器(后代选择器):类似于路径,找到符合要求的标签,会匹配所有的后代标签

格式: ul li a{} #id li a{}

5、子元素选择器:和后代类似,但是只能获得子元素

格式: ul>li>a{}

6、分组选择器:可以将多种选择器结合到一起使用,用来统一设定样式

格式: h1,h2,#abc,.m{ }

7、伪元素选择器:伪元素选择器选择的是元素的状态,状态分为以下几种:

  • link 表示元素未被点击时的状态
  • hover 表示鼠标悬停时的状态
  • active 表示元素被点击时的状态
  • visited 表示元素被点击后的状态

格式: #id:hover{ }

总结选择器:标签名选择器,类选择器,id选择器,派生选择器,子元素选择器,分组选择器,伪元素选择器

 

css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情