Note-day3(2)
来源:互联网 发布:html用什么软件编写 编辑:程序博客网 时间:2024/06/05 06:58
Day03 Css基础1
一、Css基础知识
什么是css?
——层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)。等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素
进行格式化。
层叠样式表 — 核心关键词
- 样式表:负责美化
- 层叠:样式不会被干掉而只会被覆盖
二、Css的使用方式
Css有三种使用方式。分别是在标签中使用Style属性、使用Style标签和建立一个.Css文件。
<!-- 使用css第一种方式 在标签中使用"style属性" --><!-- color:red ;改变字体颜色 --><h1 style="color:red;">Hello,World</h1><!-- css第二种使用方式 使用"style标签" --><style> /*css注释*/ /*css选择器 */ p { color: blue; }</style><!--第三种方式直接建立css文件后直接在文件中写css语句 -->
三、Css选择器
Css有三种选择器,分别是html标签选择器,class选择器和id选择器。这三种选择器均有各自的优缺点,在编写代码时需综合情况合理选择适合的选择器。
三种选择器的语法如下所示:
<style>/*html标签选择器 ,直接选择html标签,他可以作用于文件中所有相同的标签,也因为这个他不够精确。*/ p { color: red; } h6 { color: blue; } /*id选择器,此时id名为d1,作用于唯一的id*/ #d1 { color: green; } /*class选择器*/ /*class可以重复使用,多个class之间用空格隔开,此时class名为e1。作用于相同class的标签*/ .e1 { color: blue; }</style>
当三种选择器发生冲突时,我们遵循的原则是:
谁更精确就听谁的。
如:
<style>/*谁更精确就听谁的*/ div { color: blue; } #test { color: green; } .d1 { color: red; }</style>
在html body内有一个p标签:
<body><p class="d1" id="test"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p></body>
大家可以先预测一下之后运行代码核实一下。
四、通配符
通配符使用星号*表示,意思是“所有的”。他会选择页面中所有标签。
<style> * { /*通配符 选择网页中的所有标签*/ color: red; }</style>
五、div&Span标签
div和span都是无意义标签。
<div>标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素,以便通过 CSS来对这些元素进行格式化。主要是用来切割。
<span> 用于对文档中的行内元素进行组合。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。主要是针对于跨度。
通常用这两个标签来对网页进行模块划分。
<div>我是div标签</div><span>我是span标签</span>
阅读全文
0 0
- Note-day3(2)
- Note-day3(1)
- day3
- DAY3
- DAY3
- day3
- day3
- day3
- day3
- Day3
- day3
- day3
- Day3
- DAY3
- Day3
- DAY3
- day3
- Day3
- C++11之nullptr
- java 二分查找算法
- 独立之精神,自由之思想
- wex5初接触
- python:oop范式
- Note-day3(2)
- 架构设计:负载均衡层设计方案(9)——负载均衡层总结下篇
- 并查集
- Android Studio环境搭建
- makefile文件的简单知识
- 想学编程的同学,我给你一点点建议
- NoSQL 之 MongoDB
- Python装饰器实践之命令行工具
- 完绘质勘Datamine.Studio.EM/OP.v2.1.170.0