当前位置:首页 > 经验 >

初学css基础知识(css基本知识大全)

来源:原点资讯(www.yd166.com)时间:2022-10-31 22:51:08作者:YD166手机阅读>>

说明】:

id名前面必须要加上前缀“#”,否则该选择器无法生效。id名前面加上“#”,表明这是一个id选择器。

举例】:

————————————————

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style type="text/css">

#lvye{color:red;}

</style>

</head>

<body>

<div>智能化弱电分享</div>

<div id="lvye">智能化弱电分享</div>

<div>智能化弱电分享</div>

</body>

</html>

————————————————

分析】:

“#lvye{color:red;}”表示选中id为lvye的元素,然后为这个元素设置CSS属性“color:red;”。

选择器为我们提供了一种选择方式。如果我们不使用选择器,就没办法把第二个div选中。

3、class选择器

class选择器,也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”设置一个class(类名),然后针对这个class的元素进行CSS样式操作。

【基本语法格式】:

初学css基础知识,css基本知识大全(13)

说明】:

class名前面必须要加上前缀“.”(英文点号),否则该选择器无法生效。类名前面加上“.”,表明这是一个class选择器。

举例1】:

————————————————————

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style type="text/css">

.lv{color:red;}

</style>

</head>

<body>

<div>智能化弱点分享</div>

<p class="lv">智能化弱点分享</p>

<span class="lv">智能化弱点分享</span>

<div>智能化弱点分享</div>

</body>

</html>

————————————————

效果呈现如下】:

初学css基础知识,css基本知识大全(14)

分析】:

“.lv{color:red;}”表示选中class为lv的所有元素,然后为这些元素设置CSS属性“color:red;”。

p元素和span元素是两个不同的元素,但是我们可以为这两个不同的元素设置相同的class,这样就可以同时为这两个不同的元素设置相同的CSS样式了。

【举例2】:

————————————————

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style type="text/css">

.lv{color:red;}

</style>

</head>

<body>

<div class="lv">智能化学习</div>

<div class="lv">智能化学习</div>

<div>智能化学习</div>

</body>

</html>

————————————————

代码输入呈现效果如图:

初学css基础知识,css基本知识大全(15)

分析】:

虽然这个HTML页面有3个div元素,但是我们为前两个div元素设置相同的class,然后设置相同class的元素颜色为红色。因此,第3个div层内容不会变成红色,因为它不属于class="lv",它没有被“选中”。

4、子元素选择器

子元素选择器,就是选中某个元素下的子元素,然后对该子元素设置CSS样式。

【基本语法格式】:

初学css基础知识,css基本知识大全(16)

栏目热文

css学习方法和技巧(css学习基础知识)

css学习方法和技巧(css学习基础知识)

CSS 是自定义网页呈现的语言。它用于添加颜色、背景图像和纹理,以及在页面上排列元素。然而,CSS 不仅仅是绘制漂亮的图...

2022-10-31 23:06:01查看全文 >>

css菜鸟入门基础知识(css菜鸟教程)

css菜鸟入门基础知识(css菜鸟教程)

很多朋友想学一下网页制作,上网一看,只要涉及到网页制作,都离不开HTML这个词语,HTML是HyperText Mark...

2022-10-31 22:43:37查看全文 >>

css教程从零开始学(css基本知识掌握)

css教程从零开始学(css基本知识掌握)

今天要学习的是CSS,CSS是什么?CSS指的是层叠样式表,它和HTML是一对好朋友,可以对HTML网页进行修饰。为什么...

2022-10-31 22:40:11查看全文 >>

女人每天吃蚕豆好不好(癌症最怕的三种豆)

女人每天吃蚕豆好不好(癌症最怕的三种豆)

蚕豆是有些人非常偏爱的一道美食,这不新鲜蚕豆上市了,很多人开始蜂拥而至,尤其是对于主食习惯吃米饭的人群,蚕豆用来焖饭就是...

2022-10-31 22:40:06查看全文 >>

干蚕豆的家常做法大全(干蚕豆怎样做好吃法大全)

干蚕豆的家常做法大全(干蚕豆怎样做好吃法大全)

春至浓时,蚕豆飘香。三月末,四月初,是蚕豆上市的日子。春日的鲜蚕豆青绿鲜嫩,粒大饱满。口感也与平日下酒吃的香酥蚕豆大不相...

2022-10-31 22:28:38查看全文 >>

css初学者快速入门(css100个基础入门教程)

css初学者快速入门(css100个基础入门教程)

css入门:css定义:cascading style sheetscss作用:修饰美化页面css引入方式分为3种:内部...

2022-10-31 22:19:38查看全文 >>

css学习笔记入门(css入门学习笔记案例详解)

css学习笔记入门(css入门学习笔记案例详解)

CSS简介由于HTML单纯关注定义内容,CSS用于美化HTML页面CSS是层叠样式表(英文全称:CascadingSty...

2022-10-31 22:55:21查看全文 >>

css初步入门教程(css教程入门零基础)

css初步入门教程(css教程入门零基础)

PHP是世界上最好的语言,这是一个老梗。有不少学习PHP的程序员后来去做了前端开发,毕竟近些年前端开发还是蛮吃香的。学习...

2022-10-31 22:24:56查看全文 >>

css学习技巧(css怎么学习最快)

css学习技巧(css怎么学习最快)

渐变文字h1{background-image: linear-gradient(to right, #c6ffdd, ...

2022-10-31 22:37:33查看全文 >>

css零基础入门教程(css学习方法和技巧)

css零基础入门教程(css学习方法和技巧)

作为久经沙场的打工人,我们肯定经历过一次次难忘的面试,这其中有愉快的交谈,也有尴尬的对话,甚至还会有崩溃的瞬间...可以...

2022-10-31 22:32:49查看全文 >>

文档排行