CSS超详细知识点总结1
1.0 CSS页面美化和控制布局
css 指层叠样式表,(Cascading Style Sheets)
*层叠多个样式可以在同一个html的元素上,可以同时生效
好处:
1.功能强大
2.将内容显示,和样式控制分离
3.让分工更加明细
作用:
表现html或xhtml文件样式的计算机语言
包括了对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定
1.1 css和html进行结合
1.1.1:行内样式
*在html标签内使用style属性,写css代码
<div style="color: red">hello,myfirstCSS</div>
1.1.2:内部样式进行关联
书写css代码区域
在我们的header标签内部书写style标签
<style>
选择器
属性:属性值
</style>
<title>内部样式</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>hello!word</div>
优点:
方便在同页面中修改样式
缺点:
不利于在多个页面间共享复用代码及维护,对内容与样式分离也不够彻底
2.1 外部样式
步骤:
1.定义一个单独的css文件,书写对应的css代码
2.在header标签内,定义一个link标签,引入对应的css文件
<title>外部样式</title>
<link rel="stylesheet" href="a/a.css">
</head>
<body>
<div>大家好我是渣渣辉,是兄弟来砍我啊!!</div>
2.2 CSS语法结构
2.2.1:css语法结构
选择器{
属性:属性值;
属性:属性值;
........
}
注意:多个属性和属性值的话最后一个属性和属性值的后面可以不加;,可以省略分号
2.3 外部样式表
<title>导入外部样式表</title>
<style>
@import url("a/b.css");
</style>
</head>
<body>
<h1>北京欢迎你</h1>
<p>北京欢迎你,有梦想谁都了不起</p>
<p>有勇气就会有奇迹</p>
<p>北京欢迎你,为你开天劈地</p>
2.4 链接式与导入式的区别
<link/>标签属于xhtml,@import是属于css2.1
使用<link/>链接的css文件先加载到网页当中,再进行编译
使用@import导入css文件,客户端显示html结构,再把css文件加载到网页当中
@import'属于css2.1特有的,对不兼容css2.1的浏览器是无效
2.5 css优势
内容与表现与表现分离
网页表现统一,容易修改
丰富的样式,使网页布局更加灵活
减少代码的编写量,增加网页的浏览速度,节省网络带宽
运用独立于页面的css,有利于被搜索引擎收录
2.6 css样式优先级
行内样式>内部样式>外部样式
遵循就近选择
<title>css样式优先级</title>
<link rel="stylesheet" href="a/b.css">
<!--内部-->
<style>
p{
color: blue;
}
</style>
</head>
<body>
<h1>北京欢迎你</h1>
<!--行内-->
<p style="color: red">北京欢迎你,有梦想谁都了不起</p>
<p>有勇气就会有奇迹</p>
<p>北京欢迎你,为你开天劈地</p>
</body>
3.0 选择器
3.1:
概念:其实就是筛选同种类的元素
3.2:
基本选择器:
*id选择器:
id选择器可以标有特定的id的html元素指定的样式
HTML元素以id属性来设置id选择器,css中id选择器以"#"来定义
3.1 id选择器
<style>
#div1{
border: 1px solid red;
color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">今天是个好日子,明天你就要结婚了</div>
</body>
id选择器作用于唯一元素上面 ,唯一标识
3.2 基本选择器之类选择器
*类选择器
class选择器用于描述一组元素中元素样式,class选择器不同于id选择器,class可以在多个元素中使用
class选择器在HTML中以class属性表示,在css中,选择器以一个点"."号定义
元素名称{
属性:属性值
....
}
3.2.1 类选择器实例
<title>类选择器</title>
<style>
.div{
color: blue;
font-size: 25px;
width: 200px;
height: 200px;
background-color: gray;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div">div1</div>
<div class="div">div2</div>
<div class="div">div3</div>
</body>
3.3 元素选择器
*可以筛选所有相同元素的样式
元素标签名称{
属性:属性值;
......
}
3.4 元素选择器示例
<title>元素选择器</title>
<style>
div{
border: 1px solid red;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>aaaaa</div>
<div>bbbbb</div>
<div>ccccc</div>
3.5 基本选择器优先级
<title>基本选择器优先级</title>
<style>
#div1{
color: red;
}
.div{
color: pink;
}
div{
color: green;
}
</style>
</head>
<body>
<!--总结:id选择器>类选择器>元素选择器-->
<div id="div1" class="div">div1</div>
<div class="div">div2</div>
<div class="div">div3</div>
</body>
总结
元素选择器直接使用HTML标签
类选择器可以在页面中多次使用
id选择器在同一个页面中只能使用一次
案例制作影视简介
<title>影视简介</title>
<style>
h2 {
color: #003580;
}
#text {
font-size: 14px;
color: #000033;
}
.font2 {
color: #f00;
}
.font3{
color: #1f87cc;
}
.font4{
color: #faa53b;
}
.font5{
color: #ff0000;
}
.font6{
color: red;
}
</style>
</head>
<body>
<h2>花千骨</h2>
<p id="text">
<span><<花千古骨>></span>是由<a href="#">国内知名传媒集团</a>制作并发行,
<span class="font2">是由霍建华,赵丽颖,主演,林玉芬,高林豹联合执导</span>完成的一部非常具有性价比的电视剧
<span class="font3">蒋欣,杨硕</span>特别出演,
<span class="font4">张丹锋,李纯,马克........</span>等主演的特大型古装玄幻仙侠剧.
该剧改编自果果的同名小说,讲述的是少女花千骨在长留上仙白子画之间,关于责任,成长,取舍的爱情虐恋[1],
该剧是在2017年5月6号号开机,9月19号杀青,在以后还发布了英文篇...[2]
该剧在<span class="font5">湖南卫视</span>正式播出...[3]
</p>
<p>
<span class="font6">2017年同步在爱奇艺,优酷准时更新[4]</span><br/>
<img src="huaqiangu/1.jpg" alt="">
</p>
<h2>主要演员</h2>
<p>
<img src="huaqiangu/2.jpg" alt="">
<img src="huaqiangu/3.jpg" alt="">
</p>
本文详细介绍了CSS的基础知识，包括层叠原理、与HTML的结合（行内、内部和外部样式）、语法结构、优先级、选择器（id、类、元素），以及各种样式表的使用。重点讲解了如何通过CSS控制页面布局和样式，以及内容与表现分离的优势。
222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
