css学习笔记(适合后端开发人员学习的文章)

故我往事

已于 2022-12-03 20:32:09 修改

阅读量182

点赞数 1

文章标签： css 学习 html 后端

于 2022-12-03 20:19:22 首次发布

本文链接：https://blog.csdn.net/m0_68057725/article/details/128165799

版权

1、什么是css

层叠样式表语言，作用是用来修饰HTML，让HTML更好看。类似平时生活中的化妆品

2、三种方法嵌入css样式

2.1内联定义

<div id="mydiv" style="background-color:#0000ff ;
                                width:200px; 
                                height:200px;
                                position:absolute;
                                top:100px;
                                left:100px;">
        </div>

2.1.1内联定义语法格式：

<标签 style="样式名":"样式值;

样式名:样式值;

样式名:样式值;">

</标签>

2.2定义内部样式块对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定义内部样式块对象</title>
        <!-- head标签中定义style标签，定义样式快 -->
        <style type="text/css" id="1">
        
            div{
                background-color: aqua;
                width: 200px;
                height:200px;
                border-style: solid;
                border-width: 5px;  
            }
            #username{
                width: 300px;
                height:50px;
                border-color: skyblue;
            }
            
        </style>
    </head>
    
    <body>
        <div id="1"></div>
        <div></div>
        <br />
        <input type="text" id="username">
    </body>
    
</html>

2.2.1定义内部样式块对象语法:

选择器{ 样式名:样式值;

样式名:样式值;

. . . . }

2.3引入外部样式表文件：link加在<head>中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML中嵌入css：引入外部样式表文件</title>
        <!-- 在web开发中，这种方法最常用 -->
        <link rel="stylesheet"  type="text/css" href="css/test.css">
        
    </head>
    <body>
        <div id="div1"></div>
        <br />
        
        输入框：<input type="text" class="myinput">
        
    </body>
</html>

注意：任何一个HTML都可以指定style样式。