Java学习

最新推荐文章于 2024-08-08 15:02:59 发布

啊228

最新推荐文章于 2024-08-08 15:02:59 发布

阅读量186

点赞数 2

分类专栏： java 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_65986176/article/details/127041609

版权

java 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

css的基本概念：

1. CSS定义层叠样式表；

2. CSS的作用给页面中的HTML标签设置样式

css的引入方法方式：

1. 内嵌式：写在style标签中，只能作用于当前页面；

2. 外联式：写入单独的css文件中，通过link标签引入，可作用于多个页面；

3. 行内式：css写在标签的style属性中，只作用于当前页面。

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<!-- 内嵌式 -->
<style>
p {
color: red;
}
</style>
<!-- 外联式 -->
<link rel="stylesheet" href="./style.css">
</head>
<body>

<p>哈哈一号</p>

<!-- 行内式 -->
<p style="color: green;">哈哈二号</p>
</body>
</html>

基础选择器

1. 标签选择器：

语法：标签名{css属性名：属性值；}

作用：设置该类标签的样式

2. 类选择器：

1. 标签选择器：

语法：.类名{css属性名：属性值；}

作用：设置所有带有该类名的标签的样式。

3. id选择器

1. 标签选择器：

语法：#id属性值{css属性名：属性值；}

作用：设置所有带有该id属性值的标签的样式。

注意点： 1. 所有标签上都有id属性 2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！ 3. 一个标签上只能有一个id属性值 4. 一个id选择器只能选中一个标签

4. 通配符选择器

语法：*{css属性名：属性值；}

作用：找到页面中所有的标签，设置样式。（使用情况较少）

<!DOCTYPE html>
<html lang="en">
<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>Document</title>

     <style>
        /* 通配符选择器 */
        *{
            width: 200px;
            height: 100px;
            background-color: aqua;
        }

        /* 标签选择器 */
        div{
            width: 200px;
            height: 100px;
            background-color: blue; 
            }

        /*类选择器*/
         .div{
            width: 200px;
            height: 100px;
            background-color: brown;
            }

        #div2{
            width: 200px;
            height: 100px;
            background-color: chartreuse;
            }
    /* id选择器 */

         </style>
        
</head>
<body>
    <div></div>
    <div class="div1"></div>
    <div id="div2"></div>
</body>
</html>

字体与文本样式

1.字体样式

1）字体大小：font-size ；

2）字体粗细：font-weight；

3）字体样式：font-style；

4）字体类型：font-family；

2.文本样式

1）文本缩进：text-indent

2）文本水平对齐方式：text-align

3）文本修饰：text-decoration

3. 颜色

1）文字颜色：color

2）背景颜色：background-color

<!DOCTYPE html>
<html lang="en">
<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>Document</title>

     <style>
        /* 通配符选择器 */
        *{
            width: 200px;
            height: 100px;
            font-size: 90px;
            font-weight: 100px;
            font-style: italic;
            font-family: 宋体;
            text-align: center;
            color: brown;
            background-color: aqua;
        }

         </style>
        
</head>
<body>
    <div>哈哈哈哈哈哈</div>
</body>
</html>