学习目标:
掌握CSS学习内容:
1、 CSS概述 2、 基本语法 3、 选择器 4、 修饰学习时间:
2021年8月 30日学习产出:
1、 技术笔记 1 遍 2、CSDN 技术博客 1 篇
CSS概述
css:Cascading Style Sheets(级联样式表)
级联:关联 是样式表与标签之间的关联
样式表语言:修饰网页外观的语言
可以将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定于表现形式的CSS在一个.css文件中或HTML文档的某一部分
CSS与HTML的关系
HTML是网页内容
CSS定义页面的形式
基本语法
行内样式表
又称内联样式
是通过标签的style属性来设置元素的样式
<!--
行内样式表
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
使用率最低,但是优先级最高
-->
<p style="color: red;font-size: 24px;">静夜思</p>
<p style="color: red;font-size: 24px;">静夜思</p>
<p style="color: red;font-size: 24px;">静夜思</p>
内嵌样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
<!--
内嵌样式表
一般在开发测试期间使用
-->
<head>
<style type="text/css">
p{color: red;font-size: 24px;}
</style>
</head>
外部样式表
将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中
通过link标签将外部样式表连接到HTML文档中
<head>
<!--
外部样式表
使用率最高,完全实现结构和样式分离
-->
<link rel="stylesheet" type="text/css" href="css/out.css"/>
</head>
选择器
使用CSS对HTML页面中的标签实现一对一,一对多的控制
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 通过标签选择器可以选择页面中的所有指定标签 */
p{
font-size: 24px;
color: red;
}
/* id选择器 通过标签的id属性值选中唯一的一个标签 */
#p2{
color: pink;
}
/* 类选择器 通过标签的class属性值选中一组标签 */
.p3{
color: green;
}
.p2{
color: yellow;
}
/* 通配选择器 选中网页中所有标签,优先级最低 */
*{
color: blue;
}
/* 选择器组合 通过选择器分组可以同时选中多个选择器对应的标签 */
a,.h,#p1{
color: red;
}
</style>
</head>
<body>
<!--
选择器优先级:行内样式表 > id选择器 > 类选择器 > 标签选择器 > 通配选择器
-->
<p id="p1">静夜思</p>
<p id="p2" class="p3">床前明月光</p>
<p class="p2">疑是地上霜</p>
<p class="p3">举头望明月</p>
<p class="p2">低头思故乡</p>
<h1 class="h">春晓</h1>
<a>绝句</a>
</body>
文本修饰
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#p1{
color: green;/* 字体颜色 */
font-size: 24px;/* 字体大小 */
font-family: 楷体;/* 字体 */
text-align: center;/* 文本对齐方式 */
/* text-decoration: line-through;/* 定义穿过文本下的一条线 */ */
text-decoration: underline;/* 定义文本下的一条线 */
font-style: italic;/* 斜体文本 */
font-weight: bold;/* 字体粗细(bold是加粗) */
line-height: 40px;/* 设置行高 */
letter-spacing: 20px;/* 设置字符间距 */
}
.p2{
/*
text-indent用来设置首行缩进
em 当前文档中一个字符的大小
*/
text-indent: 2em;
}
a{
text-decoration: none;/* 定义标准文本 */
}
</style>
</head>
<body>
<p id="p1">
可以将页面的内容与表现形式分离,页面内容存放在HTML文档中,
而用于定于表现形式的CSS在一个.css文件中或HTML文档的某一部分
</p>
<p class="p2">
可以将页面的内容与表现形式分离,页面内容存放在HTML文档中,
而用于定于表现形式的CSS在一个.css文件中或HTML文档的某一部分
</p>
<a href="">百度</a>
<a href="">百度</a>
<a href="">百度</a>
</body>
</html>
背景修饰
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
height: 600px;
width: 800px;
background-color: aqua;/* 背景颜色 */
background-image: url(img/bg.jpg);/* 背景图片,优先级高于背景颜色,默认会重复,铺满整个标签 */
background-repeat: repeat-x;/* 背景图片重复,默认为x和y轴都重复 */
background-repeat: no-repeat;/* 背景图片不重复 */
background-size: 400px,200px;/* 背景图片的大小 */
background-position: right top;/* 背景图片位置控制 */
/* 这是针对文字的修饰 */
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<p>我是p标签</p>
</body>
</html>
列表修饰
CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志 。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
/* list-style-type: square; 设置列表图标形状
list-style-image: url(img/img.jpg) ; 替换列表项的图标
list-style-position: inside; inside图标在li里面 outside图标在li外面 */
list-style: url(img/img.jpg) none outside;/* css简写方式,不分先后顺序 */
}
</style>
</head>
<body>
<ol>
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
</ol>
</body>
</html>
outside的形式
inside的形式
伪类
标签有不同的形态,鼠标移入,点击,移出
有时需要为不同状态的标签,添加样式,可以使用伪类(伪元素)
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 鼠标移动到标签上,自动切换到此样式 */
.btn:hover{
background-color: aqua;
color: white;
}
/* 鼠标点击到标签上,自动切换到此样式 */
.btn:active{
background-color: red;
}
/* 鼠标点击可以输入烦人标签,自动切换到此样式 */
.txt:focus{
background-color: aqua;
color: white;
}
</style>
</head>
<body>
<input type="button" class="btn" value="提交" />
<input type="text" class="txt" value="" />
</body>
</html>
鼠标移入按钮
鼠标点击按钮
鼠标点击文本框并输入
透明
opacity
设置标签透明度,值从0(完全透明)----1(不透明)
当完全透明时,位置在页面中还是存在的
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img:hover{
opacity:0.1 ;
}
</style>
</head>
<body>
<img src="img/photo.jpg" >
</body>
</html>
0.1透明度的图片