上篇文章介绍了css的几种选择器,再介绍接下来内容之前,先为大家补充个选择器。
属性选择器: CSS3的选择器在CSS2的基础上进行了扩展,新增了4个属性选择器。使属性选择器有了通配符的概念。 1、E[att=“val”]——标签名[属性名=“属性值”] 匹配具有相同元素名称、相同属性名和相同属性值的元素,其中E代表HTML元素,att代表元素的属性名称,val表示属性值。
接下来为大家举个例子来理解
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
a[href="1.html"]{ color:red;}
</style>
</head>
<body>
<a href="1.html">链接到1.html页面</a>
<a href="2.html">链接到2.html页面</a>
<a href="1.html">链接到1.html页面</a>
<a href="2.html">链接到2.html页面</a>
</body>
</html>
其实说白了,属性选择器其实就是标签的某个属性值来选择,所以大家可以和标签选择器对比着来记。
E[att^=“val”]——标签名[属性名=“属性值”] 匹配具有相同元素名称、相同属性名和属性值具有相同起始字符串的元素,其中E代表HTML元素,att代表元素的属性名称,val表示属性值的起始字符串。
E[att$=“val”]——标签名[属性名=“属性值”] 匹配具有相同元素名称、相同属性名和属性值以相同字符串结束串的元素,其中E代表HTML元素,att代表元素的属性名称,val表示属性值的结束字符串。
E[att*=“val”]——标签名[属性名=“属性值”] 匹配具有相同元素名称、相同属性名和属性值中包含某字符串的元素,其中E代表HTML元素,att代表元素的属性名称,val表示属性值中包含的字符串。
好了接下来该为大家正式介绍css的一些属性了
css属性分类
字体属性、文本属性、背景属性、边框属性、表格属性、列表属性、链接属性、定位属 性、尺寸属性、布局属性、外补丁属性、内补丁属性、滚动条属性、打印属性、声音属性、内容属性、其他属性。
这些属性大家最好都记住,因为每个属性决定了不同的效果,如果我们不熟悉这些属性,在自己制作页面时候可能会非常费劲。
字体属性
color:颜色 font-family:字体 font-size:大小 font-style:样式 font-weight:浓淡 line-height:行高 font:复合字体属性
这些字体属性就比较好记住了,就是单词本身的意思。大家可以自己做个小文字段练习下。
字体大小:font-size
语法:font-size:absolute-size | relative-size | length
例: p { font-size: 12px; } p{ font-size: 1.5em ;} p { font-size: 20%; } p{ font-size: x-large;}
说明:
absolute-size(绝对大小关键字):xx-small | x- small | small | medium | large | x-large | xx-large
relative-size (相对大小关键字):larger | smaller
length(长度值):px(像素)、pt(磅)、em、%
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.p1 { font-size: 12px; }
.p2{ font-size: 1.5em ;}
.p3{ font-size: 20%; }
.p4{ font-size: x-large;}
</style>
</head>
<body>
<p class="p1">我是p1我的大小</p>
<p class="p2">我是p2我的大小</p>
<p class="p3">我是p3我的大小</p>
<p class="p4">我是p4我的大小</p>
</body>
</html>
如图所示大家要对每个大小有个具体的概念。
CSS背景属性
background-color:背景颜色
background-image:背景图片
background-repeat:平铺效果
background-attachment:滚动特性
background-position:背景图片位置
background:复合背景属性
接下来我给大家讲解个小练习来理解背景
当时我看到这个题是蒙的状态,因为我没好好理解题意,其实这道题就是让我们利用之前学过的css背景属性来完成。首先我们要把图片设置好尺寸,然后就可以完成了,这是我的代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
background-image: url("img/图片2.png");
width:120px;
height: 100px;
background-position:-120px -100px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
由于网络的原因,今天的分享暂时到这。