HTML特殊符号与 CSS选择器

最新推荐文章于 2024-04-13 14:03:08 发布

luo1904695600

最新推荐文章于 2024-04-13 14:03:08 发布

阅读量648

点赞数

分类专栏：笔记总结 HTML CSS

本文链接：https://blog.csdn.net/luo1904695600/article/details/105232974

版权

笔记总结同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

1、HTML特殊符号

在HTML中，因为某些是字符是预留的。譬如：在HTML中不能使用小于号(<)和大于号(>)，这是因为浏览器会误认为他们是标签。
HTML特殊符号

2、CSS样式选择器

2.1 标签选择器（重要）

<style>
	/** 让所有的div使用同一种样式 */
	div {
        width: 100px;	/* 宽度 */
        height: 100px;	/* 高度 */
        background-color: red;	/* 背景颜色 */
	}
</style>

2.2 id选择器（不重要）

在实际工作中，id选择器一般在js中使用，定义样式使用class
一个id只能定义一个标签，不能多个标签定义同一个id

<style>
	/** 将id为box1的盒子应用以下样式 */
	#box1 {
        width: 100px;
        height: 100px;
        background-color: red;
	}
</style>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
</body>

2.3 类选择器（非常重要）

为什么选择类选择器
1：为了样式可复用性。
2：为了代码的可维护性。

<style>
	/** 将class为box1的div应用以下样式 */
	.box1 {
        width: 100px;
        height: 100px;
        background-color: red;
	}
</style>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box1"></div>
</body>

class选择器的更多用法
在class后面加上空格在再加上名字可以定义更多样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .first{
            color: red;
        }
        .second{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="first">第一个div</div>
    <div class="first second">第二个div</div>
    <div class="first">第三个div</div>
</body>
</html>

2.4 通配符选择器

在实际工作只用这一种用法。

<style>
* {
      margin: 0;	/* 设置盒子的外边距为0 */
      padding: 0;	/* 设置喝的的内边距为0 */
  }
</style>

2.5 后代选择器（非常重要）

<head>
	<style type="text/css">
		.box1 li{    /** 中间必须是空格，表示class为box1, 所有的后代li都应用以下样式 */
			color: green;
		}
	</style>
</head>
<body>
    <!-- 如下的三个案例都会应用上如上的样式 -->
    <div class="box1">
        <ul>
            <li>用户</li>
            <li>系统</li>
            <li>菜案</li>
        </ul>
    </div>
    <ul class="box1">
        <li>用户</li>
        <li>系统</li>
        <li>菜案</li>
    </ul>
   
   <div class="box1">
        <div>
            <div>
                <ul>
                    <li>电脑</li>
                    <li>手机</li>
                    <li>计生用品</li>
                </ul>
            </div>
        </div>
    </div>
</body>

2.6 子选择器（用得较少）

<head>
	<style>
	        /**
	            .box1的直接的儿子p, 变为红色
	         */
	        .box1>p {
	            color: red;
	        }
	</style>
</head>
<body>
	<!-- 会应用如上定义的样式 -->
    <div class="box1">
        <p>文字</p>
        <p>系统</p>
        <p>菜案</p>
    </div>
    <!-- 不会应用如上定义的样式 -->
    <div class="box1">
        <div>
            <p>文字1</p>
            <p>系统1</p>
            <p>菜案1</p>
        </div>
    </div>
</body>

2.7 交集选择器（用得很少）

<head>
 	<style>
        /**
            p.red 意思是即是p标签，class又为red
         */
        p.red{
            color: red;
        }
    </style>
</head>
<body>
	<!-- 如下的三个盒子会应用如上定义的样式 -->
    <p class="red">红色</p>
    <p class="red">红色</p>
    <p class="red">红色</p>
    <!-- 如下的两个盒子不会应用如上定义的样式 -->
    <p>绿色</p>
    <p>绿色</p>
</body>

2.8 并集选择器

<head>
	<style>
		/** 所有p标签，span标签，含有class="red"下的所有的li标签 */
		p, span, .red li{
		color: red;
		}
		/*p {
			color: red;
		} */
		/*span {
			color: red;
		}*/
		/*.red li {
			color: red;
		}*/
	</style>
</head>
<body>
    <p>red</p>
    <p>red</p>
    <!-- .red li {} -->
    <div class="red">
        <span>文字</span>
        <ul>
            <li>电脑</li>
            <li>手机</li>
        </ul>
    </div>

    <div>green</div>

    <span>red</span>
    <span>red</span>
</body>

2.9 链接伪类选择器（非常重要）

记忆方法
1：爱恨法则(l o v e h a te)
2：v包包，hao

<style>
	a {
		text-decoration: none;   /** 去掉a标签的下划线 */
	}
	/* 是连接正常情况情况下的样式 */
	a:link {
		color: orange;
	}
	/* 访问过之后所呈现的颜色 */
	a:visited {
		color: red;
	}
	/* 鼠标停留在a标签上的样色 */
	a:hover {
		color: green;
	}
	/* 当鼠标按下的时候，但是没有松手的时候呈现的样式 */
	a:active {
		color: darkblue;
	}
</style>

2.10 CSS3高级选择器（待）

3、附加（了解）

lt 、gt 、le 、ge 、eq的意思

lt （less than）小于
gt （big than）大于
le （less equals）小于等于
ge （big equals）大于等于
eq （equals）等于

FrameSet (HTML框架，过时)，仅了解

<!-- ManagerSystem.html -->
<frameset rows="15%,85%">
        <frame src="1.html">
        <frameset cols="15%,85%">
            <frame src="2.html">
            <frame src="3.html" name="content">

        </frameset>
</frameset>

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
</head>
<body>
    <h1></h1>
</body>
</html>

2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2</title>
</head>
<body>
<ul>
    <li><a href="../../Day41/Test.html" target="content">Test</a></li>
    <li><a href="../../Day41/Work1.html" target="content">Work1</a></li>
    <li><a href="../../Day41/Work2.html" target="content">Work2</a></li>
</ul>
</body>
</html>

3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3</title>
</head>
<body>
    <h1>内容</h1>
</body>
</html>

luo1904695600

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML特殊符号与 CSS选择器

1、HTML特殊符号在HTML中，因为某些是字符是预留的。譬如：在HTML中不能使用小于号(<)和大于号(>)，这是因为浏览器会误认为他们是标签。2、CSS样式选择器2.1 标签选择器（重要）<style> /** 让所有的div使用同一种样式 */ div { width: 100px; /* 宽度 */ height: 10...
复制链接

扫一扫