您的位置:首页 > Web前端 > CSS

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属性的值可以相同

  • 点赞
  • 收藏
  • 分享
  • 文章举报
别团等shy哥发育 发布了26 篇原创文章 · 获赞 9 · 访问量 934 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: