CSS基础-导入及选择器

简介: 行内样式:在标签元素中,编写一个style属性,编写样式即可

CSS三种导入方式

  • 行内样式:在标签元素中,编写一个style属性,编写样式即可<h1 style="color red>稀土掘金<h1>
  • 链接式:外部样式<link rel="stylesheet" href="css/style.css">
  • 导入式<style>@import url("css/style.css")</style>
  • 优先级:就近原则
  • 首页link和import语法结构不同,前者是[html标签],只能放入[html源代码]中使用,后者可看作为[css样式],作用是引入css样式功能。import在html使用时候需要标签,同时可以直接“@import url(CSS文件路径地址);”放如css文件或[css代码]里引入其它css文件。
  • 本质上两者使用选择区别不大,但为了软件中编辑布局网页html代码,一般使用link较多,也推荐使用link。

选择器

作用:选择页面上的某一个或者某一类元素

基本选择器

  • 标签选择器:会选择到页面上所有这个标签的元素 标签{}
  • 类选择器的格式 :.class的名称{}
  • id选择器: #id名字{}好处:可以多个标签归类,是同一个class,可以复用
  • id必须保证全局唯一 不遵循就近原则,固定的
  • id选择器>class选择器>标签选择器

层次选择器

1.后代选择器:在某个元素的后面body 标签{}

2.子选择器:一代body>标签{}

3.相邻选择器 :同辈,只有一个,相邻(向下).class名 +标签{}

4.通用选择器:对下不对上,类名下的同类标签会改变.class名~标签{}

结构伪类选择器

ul的第一个子元素:ul li:first-chile{}

ul的第一个子元素:ul li:first-chile{}

  • 选中p1:定位到父元素,选择当前的第一个元素,选择当前p元素的父级元素,选中父级元素的第一个,并=并且是当前元素才生效`!

p:nth-child(1)选中p元素下的第一个标签

p:nth-of-type(1)选中父元素下p元素的第二个

所有带冒号的就是伪类选择器

相关文章
|
1月前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
18 7
|
1月前
|
前端开发 开发者
提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
【4月更文挑战第2天】 提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
32 12
|
2月前
|
前端开发
CSS语言的选择器
CSS语言的选择器
|
2月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
22 1
|
3天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
7天前
|
前端开发
CSS选择器
CSS选择器
11 1
|
13天前
|
前端开发 开发者
【专栏:CSS基础篇】CSS选择器详解:精准定位网页元素
【4月更文挑战第30天】本文介绍了CSS选择器在Web开发中的重要性,详细阐述了基础选择器(元素、类、ID、属性和伪类/伪元素)及复杂选择器(后代、子元素、相邻兄弟和一般兄弟)的用法。通过理解并巧妙运用这些选择器,开发者能更高效地控制页面样式,提高代码的可维护性。CSS预处理器如Sass、LESS进一步增强了选择器的功能,助力创建优雅且强大的样式表,实现精准的网页设计。
|
14天前
|
前端开发 容器
【Web 前端】css选择器有哪些?
【4月更文挑战第22天】【Web 前端】css选择器有哪些?
|
27天前
|
前端开发
css的选择器,优先级和示例
css的选择器,优先级和示例
9 1
|
28天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
22 1