css(续集)

最新推荐文章于 2024-08-16 23:06:16 发布

正在努力的前端小白

最新推荐文章于 2024-08-16 23:06:16 发布

阅读量149

点赞数 1

分类专栏： css 文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_64242574/article/details/124897642

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上篇文章介绍了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;}

说明：

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>

由于网络的原因，今天的分享暂时到这。

正在努力的前端小白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css(续集)

上篇文章介绍了css的几种选择器，再介绍接下来内容之前，先为大家补充个选择器。属性选择器： CSS3的选择器在CSS2的基础上进行了扩展，新增了4个属性选择器。使属性选择器有了通配符的概念。 1、E[att=“val”]——标签名[属性名=“属性值”] 匹配具有相同元素名称、相同属性名和相同属性值的元素，其中E代表HTML元素，att代表元素的属性名称，val表示属性值。接下来为大家举个例子来理解<!doctype html><html><head>&
复制链接

扫一扫

专栏目录