CSS学习笔记1
2020-04-05 12:11
1086 查看
CSS技术:
1.简介:他是层叠样式表。Cascading stytle sheet,他的作用是增强网页的显示效果。
目的:使用CSS让网页内容和样式分离,便于网站代码后续的维护。
书写规范:
选择器[属性1: 值1; 属性2: 值2; ]
2.CSS样式的引入方式
CSS不能单独使用,必须和html网页配合使用,引入css有四种方式:链入式、行内式、内嵌式、导入式。
1.行内式:直接在html标记里面使用CSS样式
语法:
<div style=“background-color:red”>div的行内式效果</div>
2.内嵌式:
语法:<style type=”text/css”> Css 代码 </style>
位置:一定要放置在标记里面
3.链入式
语法:
<link type="text/css" rel="styleSheet" href="简历测试.css" ></link>
步骤: 1创建一个CSS文件
2在网页里面使用link标签来引入外部的CSS文件
4.导入式
<style type=”text/css”> @import url(外部css的url); </style>
链接式和导入式的区别
<link>1、属于XHTML 2、优先加载CSS文件到页面
@import 1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。
1.3.CSS选择器和常用属性
1.标记选择器:直接使用html标记作为选择器
比如:
<div>标记选择器</div>
语法: div{属性:值;}
2。类选择器:直接使用html标记的class属性的值作为选择器
比如:
<div class=”divclass”>class选择器</div>
语法:.divclass{属性:值;}
3.id选择器:直接使用html标记的id属性的值作为选择器
比如:
<div id=”divid”>id选择器</div>
语法:#divid{属性:值;}
4.通配符选择器:让所有的标记显示相同的样式
语法:* {属性:值;}
选择器优先级:id选择器>class选择器>标记选择器>通配符选择器
比如:
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div {background-color:red;} .divclass {background-color:blue;} #divid {background-color: green;} * {background-color: gray ;} </style> </head> <body> <!--选择器优先级:id选择器>class选择器>标记选择器>通配符选择器--> <div>标记选择器</div> <div class="divclass">测试--选择器</div> <div class="divclass">class选择器</div> <div id="divid">id选择器</div> </body>
注意:id属性的值必须唯一,class属性的值可以相同
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- CSS学习笔记——盒模型,块级元素和行内元素的区别和特性
- html + css + js初步简单学习笔记
- VUE 学习笔记之,如何对公共JS,CSS进行统一管理,全局调用
- CSS学习笔记(十)网页布局
- CSS学习笔记09 简单理解BFC
- css学习笔记---盒模型,布局
- div+css 学习笔记1
- CSS学习笔记10 相对定位,绝对定位与固定定位
- HTML+CSS学习笔记 (13) - CSS代码缩写,占用更少的带宽
- CSS在线课程学习笔记
- HTML&CSS基础学习笔记1-简单网页中有哪些标签?
- CSS学习笔记06-分层(z-index属性).html
- HTML&CSS基础学习笔记1.13-有序列表及列表嵌套
- css学习笔记
- CSS 中 px,em和rem 的区别 学习笔记
- xhtml & css 简易学习笔记(一)
- 学习笔记:css selector
- CSS学习笔记-3
- CSS学习笔记2
- HTML、CSS、JavaScript 学习笔记