CSS的基本知识

最新推荐文章于 2024-07-04 10:59:43 发布

Gang__lang

最新推荐文章于 2024-07-04 10:59:43 发布

阅读量36

点赞数

分类专栏： CSS 文章标签： css 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/Gang__lang/article/details/129507922

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css的主要功能是用来美化HTML的。

CSS选择器

CSS共分为三种：行内CSS，内部CSS和外部CSS

<!-- 1.行内CSS 优先级最高-->
        <div style="background-color: pink;">我是最帅的</div>

内部CSS中又分为5种选择器，分别为标签名选择器，class选择器，id选择器，分组选择器和属性选择器。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试CSS的选择器</title>
        <!-- 内部CSS -->
        <style>
/* 标签名选择器：给div加背景色,给span加大字号 */
            div{
                background-color: blue;
            }
            span{
                font-size: 40px;
            }
/* class选择器：给第一个span元素，改变字的颜色 */
            .si{
                color: pink;
            }
/* id选择器：给指定元素加id属性，通过#获取id的值，值不要相同 */
            #b{
                font-family: "楷体";/*设置字体*/
            }
/* 分组选择器：把多个选择器的结果组成一组，统一设置样式 */
            #b,.si{
                border:2px solid;
                border-radius: 2px;
            }
/* 属性选择器：按照指定属性选中元素 */
        /* type="text" 文字居中 */
        input[type="text"]{
            text-align: center;/*文字居中*/
            text-shadow: 5px 5px 5px #FF0000;/*加阴影*/
        }
        </style>
    </head>
    <body>
        <input type="text" placeholder="用户名"/>
        <input type="text" placeholder="密码"/>
        <input type="number" placeholder="年龄"/>
        <div>我是div1</div>
        <div class="si">我是div2</div>
        
        <span class="si">我是span1</span>
        <span id="b">我是span2</span>
        
        <a href="http://bd.xitong18.com" target="_blank">点我</a>
    </body>
</html>

盒子模型

盒子其实就是一个个的元素，例如input，p标签都是一个个的盒子

盒子模型分为内边距（padding），外边距（margin）和边框（border）。

内边距：盒子内的内容与边框的距离

外边框：盒子间的距离

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试盒子模型</title>
    </head>
    <body>
        <!-- 盒子模型：把网页中的所有元素，都看做一个个的盒子
                内边距：padding是指内容和边框的距离
                外边距：margin是指盒子与盒子直接的距离
                边框：border是指边框的效果，宽度，颜色，实线-->
        <input type="radio" name="seg" value="1" style="margin: 20px;"/>男
        <input type="radio" name="seg" value="0"/>女
        <input type="text" placeholder="用户名" style="padding-left: 20px;margin-left: 50px;"/>
        <input type="text" placeholder="密码" style="padding-top: 20px;"/>
        <input type="text" placeholder="电话" style="padding-right: 20px;border: 2px solid red;"/>
        <input type="text" placeholder="用户名" style="padding-bottom: 20px;"/>
        
    </body>
</html>