day 14学习Python——学习html基础知识3
一、div标签
1、div标签 - 无语义
二、Css基础
1、什么是css
css又叫层叠样式表(简称：样式表)，主要用来设置网页内容的样式和布局(让网页变得好看)
2、2. css代码写在哪儿？
根据css代码写的位置不同，可以将样式表分为3种：
1)内联样式表：将css代码写在标签的style属性中（只能作用于一个标签）
2)内部样式表：将css代码写在style标签中（style标签既可以放在head中，也可以放在body中，但是一般放在head中）(可以作用于整个网页)
3)外部样式表：将css代码写css文件中，然后再html文件中用link标签导入（可以作用于所有的网页）
3.css代码怎么写？（css语法）
1）css完整语法：
选择器{
属性名1：属性值;
属性名2：属性值2;
…
}
2)说明：
a.选择器{} - 选中需要设置样式的标签（注意:内联样式表不需要写这个结构）
b.样式属性 - 属性名和属性值之间用冒号连接，一个属性添加完成后必须在后加分号）
常用的属性：color(文字颜色)、background-color(背景颜色)、font-size(设置字体大小)、widyh(s设置宽度)、font-weight(设置字体的粗细)
2）内部样式
<title></title>
<style>
这儿写csss代码
a{
background-color: yellow;
color: magenta;
}
p{
background-color: lavenderblush;
}
</style>
3）外部样式
<link rel="stylesheet" href="css/demo1.css">
</head>
4）内联样式表
</body>
<p style="color: red;">我是段落1</p>
<a href="">我是超链接1</a>
</body>
2、css选择器
css中选择器是用来选中需要设置样式的标签
-
常见css选择器
1)元素选择器(标签选择器): 直接将标签名作为一个选择器，选中的是所有指定标签
p{} - 选中当前页面中所有的p标签
a{} - 选中所有的a标签2)id选择器: 在标签的id属性值前加#作为一个选择器，选中的是id属性值为指定值的标签(id属性是唯一的，不需要使用纯数字)
#p{} - 选中id属性值为"p"的标签
#box{} - 选中id属性值为"box"的标签3)class选择器: 在标签的class属性值前加.作为一个选择器，选中class属性值为指定值的所有标签
(相同的class属性值在整个网页中可以有多个；同一个标签还可以有不同的class值)
.p{} - 选中class属性值为"p"的所有标签
.c1{} - 选中class属性值为"c1"的所有标签
4)通配符：直接将*作为选择器，选中当前页面所有的标签
5)群组选择器：得多个独立的选择器用逗号隔开作为一个选择器
p,a{} —— 选中所有的p标签和所有的a的标签
p,.c1 —— 选中所有的p标签和所有class值为从
的值
a,.c2,#p1 - 选中所有的a标签和所有的c2标签，并且id为为p1的标签
6）后代选择器 - 多个选择器用空格隔开作为一个选择器
7）子代选择器 - 多个选择器用">"隔开作为一个选择器
案例1：元素选择器
<body>
<p>我是段落1</p>
<span>我是span1</span>
<div>
<p>我数段落2</p>
<a href="">我超链接1</a>
</div>
<b>我是加粗文字1</b>
<a href="">我是超链接1</a>
<p>我是段落3</p>
<style>
p{
color: red;
}
a{
color: yellow;
}
</style>
案例2：id选择器
<p>我是段落1</p>
<span>我是span1</span>
<div>
<p>我数段落2</p>
<a href="">我超链接1</a>
</div>
<b>我是加粗文字1</b>
<a href="">我是超链接1</a>
<p id="p3">我是段落3</p>
<style>
#p3{
color: red;
}
</style>
案例3：class选择器
<p class="c2">我是段落1</p>
<span class="c1">我是span1</span>
<div>
<p>我数段落2</p>
<a href="" class="c2">我超链接1</a>
</div>
<b class="c2">我是加粗文字1</b>
<a href="">我是超链接1</a>
设置p标签的class属性值同时为c1、c2、c3
<p class="c1 c2 c3">我是段落3</p>
<style>
.c1{
color: red;
}
.c2{
background-color: yellowgreen;
}
/* 设置class值同时为c1和c2的标签的字体大小 */
.c1.c2{
font-size: 50px;
}
/* 选中class值为c2的标签 */
p.c2{
text_decoration:line-through;
}
</style>
案例4：通配符选择器
<p>我是段落1</p>
<span>我是span1</span>
<div>
<p>我数段落2</p>
<a href="">我超链接1</a>
</div>
<b>我是加粗文字1</b>
<a href="">我是超链接1</a>
<p id="p3">我是段落3</p>
<style>
*{
color:red;
}
</style
案例5：群组选择器
<p>我是段落1</p>
<span class="c1">我是span1</span>
<div>
<p>我数段落2</p>
<a class="c1" href="">我超链接1</a>
</div>
<b>我是加粗文字1</b>
<a href="">我是超链接1</a>
<p id="p3">我是段落3</p>
<style>
p,a{
color:red;
}
#p3,.c1{
background-color:aquamarine;
}
</style>
案例6：后代和子代选择器
<div id="box1">
<p>我是段落1</p>
<div id="box2">
<a href="">我是超链接1</a>
<span>
<p>我是段落3</p>
<a href="">我是超链接3</a>
</span>
<p>我是段落4</p>
</div>
<a href="">我是超链接2</a>
<span>
<div>
<p>我是段落5</p>
</div>
</span>
</div>
<p>我是段落2</p>
<style>
div>p{
color: red;
}
div p{
background-color: yellow;
}
#box2 p{
font-size: 25px;
}
#box2>p{
text-decoration: line-through;
}
</style>
3、Css相关属性
-
文字相关样式
<title></title> <!-- 1. 文字相关样式 --> <style> /* 1. 文字相关属性 */ #p1{ /* 1)文字颜色 颜色值：a.颜色英文单词 b.直接使用十六进制颜色值 b.rgb(红,绿,蓝)、rgba(红,绿,蓝,透明度) 颜色值的范围是:0~255, 透明度范围是：0~1, 0表示完全透明 */ color: rgba(255,0,0,0.5); /* 2)设置字体大小, 数值表示大小的时候需要给单位(一般是px)*/ font-size: 25px; /* 3）设置字体名称 : font-family:字体1,字体2,字体3,...; 注意：中文字体需要加引号 */ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /* 4）字体加粗: 取值范围是100(最细的)到900(最粗的) */ font-weight: 900; /* 5）文字倾斜: italic*/ font-style: italic; /* 6)对齐方式: left/right/center */ text-align: left; /* 7)设置行高 */ line-height: 60px; /* 8）文字修饰：none(去掉修饰)、underline(下划线)、overline(上划线)、line-through(删除线) */ text-decoration: line-through; /* 9)添加首行缩进 */ text-indent: 2em; /* 10)设置字间距 */ letter-spacing: 10px; } a{ text-decoration: none; } </style> </head> <body> <p id="p1">当单行文本的行高小于容器高时，<br>可实现单行文本在容器中垂直中齐以上任意位置的定位；</p> <a href="">我是超链接</a> <ul> <li>Python</li> <li>Java</li> <li>前端</li> </ul> </body>
4、伪类选择器
- 伪类选择器 - 用来选中标签状态，对特点状态设置样式
普通选择器选中标签选中的是这个标签的所有状态
1)语法：
普通选择器:伪类选择器{}
2)常用的伪类选择器(不同的伪类选择器对应不同的状态)
:link - 链接没有成功访问过的时候对应的状态(a标签特有的状态)
:visited - 链接已经访问多的时候对应的状态(a标签特有的状态)
:hover - 鼠标悬停在标签上对应的状态(所有可见标签都有的状态)
:active - 鼠标在标签上点击按住不放对应的状态(所有可见标签都有的状态)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com">第一章</a>
<a href="https://www.jd.com">第二章</a>
<a href="https://www.51job.com">第三章</a>
<a href="https://www.taobao.com">第四章</a>
<p>我是段落1</p>
<button>确定</button>
<style>
a:link{
color: gray;
}
a:visited{
color: lightgray;
}
p:active{
color: red;
}
button:active{
background-color: lightblue;
color: blue;
}
p:hover{
color: green;
font-size: 20px;
}
</style>
</body>
</html>
51万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
