css 实例001 标签选择器
选择器就是选择给谁设置样式,选择的过程就是选择器的作用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css001</title>
<!-- css就是美化布局页面的 网页的主体写在body里面 css写在 head 里面 style -->
<!-- html 可以做一些简单的样式,但是内容非常繁琐费劲,css是层叠样式表 用起来更方便 也是标记语言 -->
<!-- css 包括选择器 和样式 就是 给谁设置什么样式 -->
<style>
/* css 的选择器 包括 普通选择器 和 复合选择器 */
/* css 可以让html专门做结构 而css去做样式 */
/* 普通选择器包括 标签选择器、类选择器、id选择器、 */
/* 标签选择器:如下html 男性都是在 p 标签里面 女性都是在div 标签里面 我们如果需要把男性都改为红色 把女性都改为绿色 就可以通过标签选择器进行选择修改 */
/* 属性与属性值":"连接 属性与属性之间用";"连接 风格为展开样式,保留空格 小写形式 */
p {
color: red; /*将字体颜色改为红色*/
font-size: 20px; /*将字体大小改为20像素*/
}
div {
color: green; /*字体改为绿色*/
font-size: 20px;
} ;
/* 如上所示:通过标签名称可以选择所有的标签 对标签内容进行样式修改 */
</style>
</head>
<body>
<p>小明:男</p>
<p>小亮:男</p>
<div>
小红:女<br>
</div>
<div>
小绿:女<br>
</div>
</body>
</html>