CSS入门基础-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_79253162/article/details/143659070

css定义

用来描述网页风格、颜色、字体的语言

css常见写的方式

1）内联样式

<!DOCTYPE html><!--声明告诉浏览器HTML版本方法-->
<html lang="en"><!--语言是english-->
<head>
<title>hello</title><!--标题<title>标签-->
</head>
<body>  <!--用户可见-->
    <h1 style="color:green;text-align:center;">你好！</h1><!--text_align表示位置-->
    <h1 style="color:green;text-align:center;">hello!</h1>
    

</body>
</html>

2）内部样式

<!DOCTYPE html>
<html lang="en">
<head>
<title>hello</title>
<style>
h1{
color:green;
text-align:center
}
</style>
</head>
<body>
<h1 >你好！</h1>
<h1 >hello!</h1>
</body>
</html>

3）外部样式

我们将样式专门放在style.css文件中

h1{
color:green;
text-align:center
}

而我们将在hello.html中链接这个文件（link)

<!DOCTYPE html>
<html lang="en">
<head>
<title>hello</title>
<link rel="stylesheet" href="style.css"><!--用link标签来连接外部样式文件，rel关系就是样式表-->
</head>
<body>
<h1 >你好！</h1>
<h1 >hello!</h1>
</body>
</html>

选择器

1）元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hello</title>
    <style>
        p{
            color:orangered;
            font-family: 'Franklin Gothic Medium';
            font-size: 50px;;
            margin: 100px;
        }

    </style>
</head>
<body>
   <p>天天开心</p>
</body>
</html>

2）类选择器

使用类名选择元素，前面带 .，可以应用到多个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hello</title>
    <style>
        .box{
            color:orangered;
            font-family: 'Franklin Gothic Medium';
            font-size: 50px;;
            margin: 100px;
        }

    </style>
</head>
<body>
   <p class="box">天天开心</p>
   <p class="box">生日快乐</p>
</body>
</html>

3）id选择器

使用元素的 id 选择，前面带 #。ID 是唯一的，用于页面中唯一的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hello</title>
    <style>
        #pt{
            color:orangered;
            font-family: 'Franklin Gothic Medium';
            font-size: 50px;;
            margin: 100px;
        }

    </style>
</head>
<body>
   <p id="pt">天天开心</p><!--pt为id名-->
</body>
</html>

4）属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hello</title>
    <style>
        input[type="text"]{
            background-color: aquamarine;
        }
        input[placeholder]{
            font-size: 30px;
        }
    </style>
</head>
<body>
   <form>
    <input type="text" placeholder="name"></form><br>
    <input type="password" placeholder="password">
</form>
   </form>
</body>
</html>

6）组合选择器

后代选择器（AB)：选择A元素内部所有B元素

div p {
    color: green;
}

子选择器（A>B)：选择A元素的直接子元素B元素

ul > li {
    list-style-type: square;    <!--定义列表前的标记-->
}

相邻兄弟选择器（A+B）：选择与A相邻的B元素

h1 + p {
    margin-top: 10px;<!--设置元素顶部外边距-->
}

通用兄弟选择器（A~B):选择A元素之后的所有兄弟B元素。

h1 ~ p {
    color: gray;
}

……

css属性

1）填充、间距

 div{
        background-color: aqua;
        width:500px;
        height:400px;
        padding:50px;/*在元素内部填充50像素*/
        margin:20px;/*间距*/

    }

2)字体设置

 div{
    font-family:Arial;    /*字体*/
    font-size:32px;    /*字体大小*/
    font-weight:bold;    /*加粗，bolder更粗，lighter更细*/
    color:red;    /*颜色*/
    }

3)边框

    table{
            border: 1px solid black/*1像素实线、黑色*/
            border-collapse:collapse;/*折叠边框*/
        }
        th,td{
            border: 1px solid black;
            padding:10px; /*填充*/
            }

4）背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hello</title>
    <style>
       #bg{
        width: 600px;
        height: 800px;
        background-color: blanchedalmond; /*背景颜色*/
        background-image:url("图片.html/th.jpg") ;  /*背景图片*/
        background-position: left center; /*显示位置*/
        background-repeat: no-repeat; /*图片填充方式*/
        background-size: 500px; /*图片大小*/
    
       }
    </style>
</head>
<body>
    <div id="bg"></div>
</body>
</html>

5）文本属性

<head>
    <title>hello</title>
    <style>
       #bg{
        text-align: center; /*文本对齐方式*/
        text-decoration: underline; /*下划线*/
        text-transform: lowercase;  /*小写*/
        text-indent: 50px;  /*首行缩进*/
    
       }
    </style>
</head>
<body>
    <div id="bg">
      <p>A人生自古谁无死</p>
      <p>B留取丹心照汗青</p>
    </div>
</body>

6）盒子模型

margin：边距

border：边框

padding：内边距

content:内容

弹性盒子模型：

通过设置display属性的值为flex,实现移动响动页面

<head>
    <title>hello</title>
    <style>
      .box{
        display: flex;
        flex-wrap: wrap;    /*空间不够时，换行*/
        justify-content: center;  /*专门定义在主轴的对齐方式*/
        align-items: center;  /*定义在交叉轴上的统一对齐方式*/
        flex-direction: row; /*指定弹性子元素在父容器中的位置*/
      }
       .box>div{
        width: 50px;
        height: 50px;
        text-align: center;
        margin: 20px;
        padding: 20px;
        background-color: aquamarine;
       }
    </style>
</head>
<body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      
    </div>
</body>