css学习总结

于 2020-07-24 22:54:24 发布
阅读量232 收藏 1
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyong5854/article/details/107569696
版权

1. 概念

css：Casading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效。

好处：
1.功能强大
2.将内容展示和样式控制分离，降低耦合度，让分工协作更容易，提高开发效率

2 css与html的结合方式

1.内联样式
在标签内使用style属性指定css代码

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--

内联样式
    * 在标签内使用style属性指定css代码
-->
<div style="color:red;">hello css</div>
</body>
</html>

在这里插入图片描述

2.内部样式
在head标签内，定义style标签,style标签的标签体就是css代码

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: blue;
        }

        p{
            color: red;
        }
    </style>
</head>
<body>
<!--

内部样式
    * 在head标签内，定义style标签，style标签的标签体内容就是css代码
-->
<div>hello css</div>
<p>hello css</p>
</body>
</html>

在这里插入图片描述
3.外部样式
（1）定义css资源文件
（2）在head标签内，定义link标签，引入外部的资源文件

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/a.css">
    <!--<style>
        @import "css/a.css";
    </style>-->

</head>
<body>
<!--

外部样式
    1. 定义css资源文件。
    2. 在head标签内，定义link标签，引入外部的资源文件

-->
<div>hello css</div>
<div>hello css</div>

<p>java</p>
</body>
</html>

/*以下是a.css文件*/
div{
    color: green;
}

p{
    color: red;
    font-size: 30px;
}

3 基础选择器

选择器：筛选具有相似特征的元素

格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
…
}
选择器:筛选具有相似特征的元素
注意：
每一对属性需要使用；隔开，最后一对属性可以不加；

  1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
    语法：#id属性值{}
  2. 元素选择器：选择具有相同标签名称的元素
    语法： 标签名称{}
    注意：id选择器优先级高于元素选择器
  3. 类选择器：选择具有相同的class属性值的元素。
    语法：.class属性值{}
    注意：类选择器选择器优先级高于元素选择器

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>

    <style>
        .cls1{
            color:blue;
        }

        div{
            color:green;
        }

        #div1{
            color:red;
        }
    </style>

</head>
<body>
<!--

1. 基础选择器
    1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
        * 语法：#id属性值{}
    2. 元素选择器：选择具有相同标签名称的元素
        * 语法： 标签名称{}
        * 注意：id选择器优先级高于元素选择器
    3. 类选择器：选择具有相同的class属性值的元素。
        * 语法：.class属性值{}
        * 注意：类选择器选择器优先级高于元素选择器
-->
        <div id="div1">我爱java</div>
        <div class="div">java爱我</div>
        <p class="cls1">爱我java</p>
</body>
</html>

在这里插入图片描述

4 扩展选择器

  1. 选择所有元素：
    语法： *{}

  2. 并集选择器：
    选择器1,选择器2{}

  3. 后代选择器：筛选选择器1元素下的选择器2元素
    语法： 选择器1 选择器2{}

后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。

  1. 子选择器：筛选选择器2的父元素选择器1
    语法： 选择器1 > 选择器2{}

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

  1. 属性选择器：选择元素名称，属性名=属性值的元素
    语法： 元素名称[属性名=“属性值”]{}

  2. 伪类选择器：选择一些元素具有的状态
    语法： 元素:状态{}
    如：
    状态：
    link：初始化的状态
    visited：被访问过的状态
    active：正在访问状态
    hover：鼠标悬浮状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>

    <style>
        div p{
            color: red;
        }

        div em{
            color: red;
        }

        div > p{
            border:1px solid;
        }

        input[type="text"]{
            border:5px solid;
            color: #FF0000;
        }

        a:link{
            color:pink;
        }
        a:hover{
            color:green;
        }

        a:active{
            color:yellow;
        }

        a:visited{
            color: red;
        }
    </style>
</head>
<body>
        <div>
            <p>我爱java</p>
        </div>

        <div>
            <em>哟哟哟</em>
        </div>

        <p>java爱我</p>

        <div>爱我Java</div><br>

        <p>
            <em>噢噢噢噢</em>
        </p>

        <input type="text">
        <input type="password">

<br><br><br>

<a href="#">点击就送</a>
</body>
</html>

在这里插入图片描述

5 盒子模型

  1. 字体、文本
    font-size：字体大小
    color：文本颜色
    text-align：对其方式
    line-height：行高

  2. 背景
    background：

  3. 边框
    border：设置边框，符合属性

  4. 尺寸
    width：宽度
    height：高度

  5. 盒子模型：控制布局
    margin：外边距
    padding：内边距
    默认情况下内边距会影响整个盒子的大小
    box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

  6. float：浮动
    left 左浮
    right 右浮

    element : 元素。
    padding : 内边距，也有资料将其翻译为填充。
    border : 边框。
    margin : 外边距，也有资料将其翻译为空白或空白边。
    在这里插入图片描述元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css属性</title>
    <style>
        div{
            border: 1px solid red;
            width: 100px;
        }

        .div1{
            width: 100px;
            height:100px;
            /*外边距*/
            /* margin: 50px; */
        }

        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;
            /*
                设置盒子的属性，让width和height就是最终盒子的大小
             */
           box-sizing:border-box;
        }

        .div3{
            float: left;
        }

        .div4{
            float: left;
        }

        .div5{
            float: right;
        }
    </style>
</head>
<body>
        <div class="div2">
            <div class="div1"></div>
        </div>

        <div class="div3">aaa</div>
        <div class="div4">bbb</div>
        <div class="div5">ccc</div>
</body>
</html>

在这里插入图片描述

6 注册案例

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing:border-box;
        }

        body{
            background: url("img/register_bg.png") no-repeat center;
            padding-top: 25px;
        }

        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            margin:auto;
            margin-top: 15px;
        }

        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }

       .rg_left > p:first-child{
            /*border: 1px solid red;*/
            color: #FFD026;
            font-size: 20px;
        }

        .rg_left > p:last-child{
            /*border: 1px solid red;*/
            color: #A6A6A6;
            font-size: 20px;
        }

        .rg_center{
            /*border: 1px solid red;*/
            float:left;
            width: 450px;
        }

        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }

        .rg_right > p:first-child{
            /*border: 1px solid red;*/
            color: #FFD026;
            font-size: 15px;
        }

        .rg_right p a{
            color:pink;
        }

        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }

        .td_right{
            padding-left: 50px ;
        }

        #username,#password,#email,#name,#tel,#checkcode,#birthday{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }

        #checkcode{
            width: 110px;
        }

        #img_check{
            height: 32px;
            vertical-align: middle;
        }

        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;
        }

    </style>

</head>
<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p >新用户注册</p>
            <p>USER REGISTER</p>
        </div>

        <div class="rg_center">
            <div class="rg_form">
                <!--定义表单 form-->
                <form action="#" method="post">
                    <table >
                        <tr>
                            <td class="td_left"><label for="username">用户名</label></td>
                            <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="email">Email</label></td>
                            <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入Email"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="name">姓名</label></td>
                            <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="tel">手机号</label></td>
                            <td class="td_right"><input type="tel" name="tel" id="tel" placeholder="请输入手机号"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label>性别</label></td>
                            <td class="td_right"><input type="radio" name="gender" value="male"> 男
                                <input type="radio" nmae="gender" value="female">女
                            </td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="birthday">出生日期</label></td>
                            <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="checkcode">验证码</label></td>
                            <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                <img id="img_check"  src="img/verify_code.jpg">
                            </td>
                        </tr>

                        <tr>
                            <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                        </tr>
                    </table>
                </form>

            </div>
        </div>

        <div class="rg_right">
            <P>已有账号?<a href="#">立即登录</a> </P>
        </div>

    </div>
</body>
</html>

在这里插入图片描述

谢晓永
关注
专栏目录
CSS学习总结
qq_55002082的博客
07-27 1161
CSS代码风格，选择器和样式详解
HTML总结&CSS学习总结
m0_65791148的博客
06-21 1561
HTML总结&CSS学习总结
CSS学习总结一
千铭丶博客
06-18 497
CSS:层叠样式表（cascading Style Sheets  通俗的讲：就是给HTML化妆的） 样式定义如何显示HTML元素 样式通常存储在样式表中 css使用的三种样式： 一、内联样式 直接在元素中声明 二、内部样式  （注意：在内部样式中的注释，只能这样写/**/，写成&lt;!----&gt;回导致后边代码出错） 在&lt;head&gt;&lt;/head&gt;中声明 ...
学习css的总结
zoey的专栏
01-29 964
一．Css分类 1.替代replaced elements:          img input(radio button, checkbox, text) 不可替代nonreplaces elements:          html,xhtml,span,a,div,body,form,p,em,strong, 2.block-level andinline-level:(bloc
CSS学习总结.docx
03-17
【CSS学习总结】 CSS，全称Cascading Style Sheets，中文称为层叠样式表，是一种用于定义HTML或XML（包括SVG、XHTML等）文档样式的样式表语言。它的主要功能是让网页的设计更加美观，能够精准控制网页的布局、颜色...
学习CSS总结（三）
weixin_30522095的博客
08-05 79
CSS position 属性值： absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 fixed：生...
css学习与总结
CHWB2580的博客
04-10 175
布局标签之间的比较 昨天刚学完用table标签和frameset框架标签的页面布局，今天又学习div+css的页面布局。感觉计算机技术就是这样，一个简单的页面布局都是这样可用多种方法，并且三种方法对于一些简单基本的布局都能实现，且各有特点。 1、TABLE表格布局。 ...
CSS学习总结与心得体会
m0_49305575的博客
07-11 6560
CSS的学习总结与心得体会 CSS又称为层叠样式表，学习CSS就是学习许多选择器以及属性。CSS的主要作用是对前端页面进行布局与美化。 布局 盒子模型 块级元素并排显示 盒子模型 盒子模型是对页面进行布局所需要使用的非常重要的一部分。盒子模型本质上就是一个盒子，它包括边距（margin）、边框（border）、填充（padding）、内容（content）、背景（backbround），下面对每一部分进行简单的说明。 margin(外边距)：清除边框外的区域，外边距是透明的； border(边框)：
CSS3学习小结
weixin_34324081的博客
11-14 83
这几日在http://lab.iamvdo.me/houdini/看到了很炫酷的CSS实现。看到人家实现的实在是太棒了，就想到该学学CSS了。 @support属性 @support:用来查询浏览器是否支持css新特性。目前各大浏览器对@support的支持情况：现代浏览器除了IE系列之外，都对@supports有很强的的支持性，甚至在移...
CSS学习笔记总结（上）
Shaun_X
05-02 691
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值