html标签样式

1、内联样式

2、内部样式《标签选择器》

3、外部样式

4、html引用css

5、《class选择器》

6、《id选择器》

7、《群组选择器/并集标签》

8、《兄弟选择器》

9、《相邻标签》

10、子代选择器

11、《后代选择器》

12、class相同：

13、伪装选择器

14、focus伪类选择器

15、字体样式

16、文本样式

17、文字内容超出省略

18、块级元素

19、行内元素

20、行内块元素

21、显示形式转换

22、背景

23、背景图片位置

24、固定背景

25、背景复合写法

优先级：内联样式 > 内部样式 > 外部样式

在<style>....</style>内设置样式

1、内联样式：写在标签里面

<body>
<!--内联样式 写在标签里面-->
<!--style=背景颜色;width:宽度像素--><div style="background-color: pink;width: 300px">人生苦短，我用python</div>
</body>

2、内部样式《标签选择器》：<style> 标签{ } </style>

功能：同步设置多个标签样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    内部样式--><style>div{background-color: pink;width: 470px;}</style>
</head>
<body><div>人的一生为什么要努力？因为最痛苦的事，不是失败，是我本可以</div>
</body>
</html>

标签选择器同步设置多个标签

3、外部样式：新建css样式表，html用Link方法引用

css样式表：<style>div{background-color: pink;width: 200px;}
</style>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    外部样式--><link rel="stylesheet" href="01_css基本使用.css">

4、html引用css

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    外部样式--><link rel="stylesheet" href="01_css基本使用.css">

5、《class选择器》：先定义类（. ABC）-标签内引用类<p class='ABC'>

功能：针对单个标签设置样式，可被多个标签引用

输出：

6、《id选择器》：定义id（#ABC） -标签内通过id属性引用（id='ABC'）

功能：具有唯一性（引用多个会语法报错）

7、《群组选择器/并集标签》：标签1，.类名{background-color：背景颜色, height：高度,width：宽度}

功能：多种标签、自定义类等同时设置样式

<head><meta charset="UTF-8"><title>Title</title><style>
<!--    三种写法ul li / .nav  / .nav li -->div,p,ul li{color: pink;}</style>
</head>
<body><div>熊大</div><p>熊二</p><ul class="nav"><li>第一个li</li><li>第二个li</li><li>第三个li</li></ul>
</body>

8、《兄弟选择器》：（标签1~标签2）

功能：给标签1后面的所有同级标签2设置样式。

<!--    兄弟选择器--><style>div~p{background-color: bisque;height: 40px;}</style>
</head>
<body><div>我是第一个div盒子</div><div><p>我是第一个p盒子</p></div><p>第一个p标签</p><p>第二个p标签</p><p>第三个p标签</p>
</body>

兄弟选择器输出：

9、《相邻标签》：（.类名）+标签（必须是相邻且从上往下找）

功能：给小李邻居老王设置样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*相邻选择器*/.div2+p{background-color: blueviolet;height: 30px;}</style>
</head>
<body><div class="div1">我是第一个div盒子</div><div class="div2"><span>我是第一个span盒子</span></div><p>第一个p标签</p><p>第二个p标签</p><p>第三个p标签</p>
</body>
</html>

相邻标签输出：

10、子代选择器：标签1>标签2

功能：给dic标签内的p标签设置样式

子代选择器输出：

11、《后代选择器》

功能：仅给内嵌标签设置样式，不限层数

    <style>/*后代选择器*/div p{background-color: bisque;height: 50px;}</style>
</head>
<body><div>我是第一个div盒子</div><div><span>我是第一个span盒子</span><div><p>我是内嵌的p标签</p><span><p>我也是内嵌的p标签</p></span></div></div><p>第一个p标签</p><p>第二个p标签</p><p>第三个p标签</p>
</body>

后代选择器输出：

12、class相同：需要加工的标签.类名{...样式....}

功能：当拥有相同类的不同标签，针对某个标签需加样式时

    <style>/*box类字体蓝色*/.box{color:blue}/*首先你必须是个div，其次class为box*/div.box{background-color: palegoldenrod;height: 40px;}</style>
</head>
<body><div class="box">我是一个div盒子</div><span class="box">我是一个span盒子</span><p class="box">我是一个p标签</p>
</body>

class相同输出：

13、伪装选择器：链接标签a：link{color:yellow}

link 超链接点击之前
visited 链接被访问过之后

功能：作用于链接标签当鼠标移动标签时触发...

设置未被点击的时字体颜色：a：link{color:yellow}

设置已被点击的链接字体颜色：a:visited{color: brown}

设置鼠标悬停的字体颜色：a:hover{color: yellow;}

设置鼠标点击未释放字体颜色:a:active{color: blue;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*未被点击的时候*/a:link{color: coral;}/*已被点击的链接*/a:visited{color: brown;}/*鼠标悬停背景的样式*/a:hover{color: yellow;}/*鼠标点击未释放*/a:active{color: blue;}/*如果这四个选择器都要设置，必须要按照上面的顺序，lvha*/</style>
</head>
<body><a href="#">百度一下</a>
</body>
</html>

14、focus伪类选择器：表单标签：focus{样式}

功能：作用于表单标签，当鼠标悬停在表单时触发

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>input:focus{ background-color: pink;}</style>
</head>
<body><input type="text"><input type="text"><input type="text">
</body>
</html>

focus伪类选择器输出：当鼠标悬停在表单时背景色为pink