Web基本教程~04.css入门
Web基本教程~04.css入门
上一期
CSS 的引入方式
内联样式（行内样式）
<p style="background: orange; font-size: 30px;">MyFirstCSS<p>
内部样式
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style>
p {
background: orange;
font-size: 30px;
}
style>
head>
<body>
<p>MyFirstCSS<p>
body>
html>
外部样式
<link rel="stylesheet" type="text/css" href="xxx.css">
基础选择器
全局选择器
可以和任何元素匹配,不推荐使用
*{
margin: 0;
padding: 0;
}
元素选择器
就是内部样式案例的方式,不过实际应用中最常用的还是类选择器
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style>
p {
background: orange;
font-size: 30px;
}
style>
head>
<body>
<p>元素选择器<p>
body>
html>
类选择器
这个最为灵活,实战中也用的最多。一般都是把css作为一个单独的文件存放,写完后直接调用需要的类即可。
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style>
.one{
width:800px;
}
style>
head>
<body>
<h2 class="one">todayh2>
body>
html>
ID 选择器
相对来讲还可以
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style>
#my{
border:3px dashed green;
}
style>
head>
<body>
<h2 id="my">todayh2>
body>
html>
背景属性
CSS 背景属性主要有以下几个
background-color 属性
属性设置背景颜色
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
.background{
width: 300px;
height: 200px;
background-color: aquamarine;
}
style>
head>
<body>
<div class="background">
color 颜色值<br/>
transparent 默认值,背景是透明的<br/>
inherit 从父类继承
div>
body>
html>
background-image 属性
设置元素的背景图像
元素的背景是元素的总大小， 包括填充和边界（ 不包括外边距）。默认情况下background-image 属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分。
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
.background{
width: 300px;
height: 200px;
background-image:url(./img/a.jpg);
}
style>
head>
<body>
<div class="background">
url 图像的地址 <br/>
transparent 默认值,没有背景图像<br/>
inherit 从父类继承
div>
body>
html>
background-repeat 属性
该属性设置如何平铺背景图像
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
.background{
width: 300px;
height: 200px;
background-image:url(./img/a.jpg);
background-repeat: no-repeat;
}
style>
head>
<body>
<div class="background">
repeat 默认值，像垂直水平方向平铺<br/>
repeat-x 只像水平平铺<br/>
repeat-y 只像垂直平铺<br/>
no-repeat 不平铺 <br/>
inherit 从父类继承
div>
body>
html>
background-size 属性
属性设置背景图像的大小
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
.background{
width: 300px;
height: 200px;
background-image:url(./img/a.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
style>
head>
<body>
<div class="background">
length 设置背景图片的竞度和高度。简一个值设置宽度，第二个值设置高度。如果只没置一个值，第二个值会默认为auto
peroentage 计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置高度。如果只设置一个值，那么第二个值默认为auto
cover 保持图像的淑模比并将图像缩没成完全覆盖背最定位区域的最小大小
contain 保持图傍的调模比并将图像运瞒成适合背景定位区域的最大大小
div>
body>
html>
background-position
该属性设置背景图像的起始位置，其默认值是：0% 0%
background-position: center;
background-attachment 属性
该属性设置背景图像是否固定或者随页面滚动。简单来说就是一个页面有滚动条的话， 滑动滚动条背景是固定的还是随页面滑动的