3.初识CSS与文本背景样式

目录

1.上节回顾

超链接a标签：<a href='地址'>超链接文本</a>
		也可以用id属性来超链接文本里面的内容
<img src='图片地址' alt='图片描述'>
列表分为有序，无序，自定义列表
	有序：ol 和li一起用
	无序：ul和li一起用，可以用快捷键 ul>li*N来弄出N个标签
	自定义标签：dl，dd，dt，其中dd是内容，dt是标题

2.CSS定义

html-->写东西出来给别人看
css-->找到html写出来的东西，再给他加特效
	1.怎么找
	2.加什么
css--层叠样式表-->用来对网页进行排版，美化外观，优化性能
	文本--字体，大小，颜色，缩进
	图片--宽高，边框，颜色，透明
html--身体
css--化妆品
	网页文件后缀：.html
	样式表文件的后缀： .css
css注释写法：
	/*注释内容*/

3.CSS选择器

css的工作分为两步：1.找到元素 2.加样式
	选择器就是帮助我们找到元素的一种方法，通过选择器找到对应的标签元素
	一般修饰要在head标签里面写，style标签
1.标签选择器：选择一个标签（一个网页里的所有该标签）
语法为：
	标签名{
		属性:值
	}
	例如：
		 p{
            color: #00ff1a;
            font-size: 70px;
            /* font: medium; */
        }
 2.id选择器：先给标签设置id名，然后通过#id名的方式找到该标签，id相当于身份证，是唯一的。不要给多个标签设置一样的id名。
 	语法：
 		<标签名 id='id名'>内容</标签>
 		例如：
 			   #hot1{
            color:#094;
            font-size: 40px;
        }
 3.class选择器（类）：先给标签设置class类名/类型，然后通过.class名的方式找到该标签，class为类型，可以有多个，但是id只能有一个。
 	语法：
 		<标签 class='类名'>
 		<span class='money'>
 		
 		
 		.money{
            color: #a00073;
            font-size: 70px;
        }
 4.通配符选择器(*):通配符选择用*表示，表示选中网页里的所有元素。（正式开发不用这个通配符选择器）；
 	语法格式：
 		*{
 			属性：值；
 			属性：值；
 		}
 		    *{
            color: #6e0000;
            font-size: 40px;
        }
 一般来说class选择器用的较多。
 标签选择器：一般用来清除样式/换个样式
  • 例题：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            color: #00ff1a;
            font-size: 70px;
            /* font: medium; */
        }
        /* span{
            font:xx-large;
            font-style: unset;
        } */
        /* id选择器 */
        #hot1{
            color:#094;
            font-size: 40px;
        }
        /* class选择器 */
        .money{
            color: #a00073;
            font-size: 70px;
        }
        /* 通配符选择器 */
        *{
            color: #6e0000;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>一曲高歌</p>
    <p>一步杀一人</p>
    <p>千里不流行 </p><!--带换行-->
    <span id="hot1">我喜欢你</span> <!--不带换行-->
    <span class="money">你好有钱呀!!!</span>
    <span>通配符选择器</span>
</body>
</html>

4.CSS样式的三种写法

style:样式
	1.内部样式表-->把样式写在页面head标签里面，选择器写在style标签里面。
	2.外部样式表-->把css代码写在一个专门的.css文件里，需要使用的时候就用link标签导入，
		例如： <!-- /* 外部样式表 */ -->
    <link rel="stylesheet" href="demo.css">
    3.行内样式表-->通过标签属性style。直接把样式写在标签里
    	语法：
    		<标签名 style='属性：属性值'>
    样式表的优先级：参考就近原则 -- 行内样式 >内部样式/外部样式（谁离目标标签越近就听谁的）；

例题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- /* 外部样式表 */ -->
    <link rel="stylesheet" href="demo.css">
    <!-- 内部样式表 -->
    <style>

        .kylin1{
            color: #bd0000;
            font-size: 70px;
        }
        p{
            color: #9e0000;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p class="kylin1">我喜欢你</p>
    <p id="kylin2">我喜欢你</p>
    <!-- 行内样式表 -->
    <p style="color: aquamarine;text-align: center;font-size: 70px;">我喜欢你</p>
    <b>我想你</b>
</body>
</html>

5.div盒子标签(division)

div主要是用来布局使用。因为他本身没有含义/属性/样式。很单纯，可塑性强。
适合作为容器，所以管他叫盒子，把对应的内容放在盒子里面
	div本身是没有宽高/颜色/边框这些样式
属性：
	width:宽度
	height：高度
语法：
	<div>内容</div>
快捷键：
	#id属性值+enter 产生一个id的属性盒子
	.class属性值+enter 产生一个class的属性盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body .font{
            color: #096;
        }
        body>p.hot{
            color: #ff0000;
        }
    </style>
</head>
<body>
    <!-- 两个类名分别为font hot -->
    <p class="font hot">我真的喜欢你</p>
    <p class="font hot">我真的喜欢你</p>
    <p class="font hot">我真的喜欢你</p>
    <p class="font hot">我真的喜欢你</p>
    <p class="font hot">我真的喜欢你</p>
    <p class="font hot">我真的喜欢你</p>
    <b class="font">你喜欢我？</b>
    <b class="font">你喜欢我？</b>
    <b class="font">你喜欢我？</b>
</bodyont
</html>

6.文本样式（font）

  • span标签是一个文本标签，它没有特别的样式/属性，很单纯，所以适合加文本样式

  • 1.color：颜色的用法：

    • color：颜色英语单词（blue，green等）

    • font-size：字体大小。（px像素，em：一个字的大小）

    • font-family:字体

    • font-weight：字体粗细

    • font-style：字体样式（倾斜）

      ​ font-style：italic；

    • text-indent:文字缩进

    • text-align：设置文本对齐

    • text-decoration：设置文本下划线

    • line-height:设置文本行高

      • 例如：line-height: 100px;

7.背景样式（background）

background:背景样式

1.background-color:背景颜色
2.background-image：设置背景图片
	语法：background-image: url(./image.png);
3.background-position：设置背景位置
	有：left，center，right，top，button
4.background-size：设置背景大小
	background-size：cover；缩放的意思
5.background-repeat：设置背景重复
	background-repeat：no-repeat；设置背景不重复
posted @ 2024-08-04 22:34  奋斗的独角兽  阅读(21)  评论(0)    收藏  举报