2022-07-10 第三小组黄均睿前端学习笔记（day3）_练习类选择器,设置名为father的类选择器为红色字体,16px大小,应用在某个段落上-CSDN博客

本文链接：https://blog.csdn.net/weixin_56982770/article/details/125770760

首先前端有三个方式可以更改样式：

1.行内样式；2.内链样式（嵌入样式）;3.外部样式。

顾名思义，就是在一行标签里直接添加样式的方法：

在head里填写一个<style></style>

基本上所有的更改样式都在外部样式里书写，以便实现css和html分离。

在<head></head>里进行链接

行内>类>标签>id

最终结果是：颜色是蓝色

如果样式有冲突，跟class里的顺序没有关系，跟声明的样式谁是最后执行有关，如果没冲突，两个样式里的都可以实现。

继承的样式权重为最低

行内样式权重最高

如果权重相同，看最后执行哪个。

！important可以改变优先级为无限大。color: red!important—这么使用。

px像素绝对单位；

em相对单位;参考父级元素。父类字体设置16px，子类字体2em就是32px.

rem相对单位；根据页面决定，若我们改变浏览器的字号设置，页面的字号也会随之发生变化。大多应用在老人版。

百分比，相对于父级元素的比例。

font-size:1px;—–字体大小

font-family: '楷体';—–字体样式

l ine-height: 25px;—行高

font-weight:bold;—–粗细

text-decoration: none;—–去掉下划线

font-style: italic;—–字体倾斜

list-style-type:lower-greek;—–排序类型

list-style-position:outside;—–位置

list-style-image:url();—–图片类型

border-style:dotted;—–边框线的样式

border-width:5px;—–边框线的宽度

border-color:red;—–边框线的颜色

简写：：border:solid red 1px;

border-bottom:1px red double;—-下面的边框的边框线为1px,红色，double

border-radius:5px;—–半径(css3新出的)

border-collapse:

border-spacing:0;

display:inline;—–行级(宽高没用)

display:block;—–块级

display:none;—–无

display:inline-block;—–行级块（可以设置宽高，其他的不行）

margin--外边距，元素距离另一个元素的距离。

padding--内边距,块元素里面的距离边框的距离。

border--边框

box-sizing:border-box;—–设置盒子模型的尺寸计算方式。

relative 相对定位

参照物依旧是已经定位的父级元素。

占有原有位置。不会上天

absolute 绝对定位

当前的文档流可以理解为上天了。

参照物是已经定位的父级元素。

static 文档流(默认)

fixed 浮动

visibility:hidden/visible—–隐藏/显现

溢出以滚动条形式--scroll

溢出隐藏。overflow:hidden;

float;

overflow:hidden;

浮动的元素会脱离原本的文档流，造成父元素的高度坍塌。

包围图片和文本的div不占据空间，使用了浮动的元素，后面的紧跟的元素就会错误；

2.css引入

3.css特点

4.定位，盒子模型。

小记：no-repeat center;在图片后加上意思为：不重复，居中。

CSS层叠样式表

样式如何显示html元素，样式通常是储存在样式表中，把样式表添加在hmtl元素中

定义css样式的方法

行内（内联）样式：style #如果当前的样式不用重复，可以用行内样式，优先级高

background

内页样式（嵌入样式）：

根据标签来命名，选择器，标签选择器，可以和标签的名字一模一样，可以让页面上的所有p标签都有

对应效果

1、标签选择器#列如<p>

2、声明一个样式，并起个名，声明样式的时候需要用一个英文的. 选择样式通过class属性不需要.

.bg 可在div或其他方式中用class=bg显示

3、id选择器

#spring，一样可以定义样式，需要有一个#。对应元素的id要匹配

4、外部样式（推荐）

可以在外部写一个css

5、可以多选选择器

选中页面上所有的div和p进行修改直接用div，p{}

要在div里所有的p改变，就用子选择div p{}

div>p只有在div里的p会改变，父子关系

div+p是在div后的p紧跟着的p会改变

6、属性选择器

[type]选中页面上所有带有type的属性

如果选中type=txet的，那么只有当type=text的时候才会改变

[type~=]选中页面上type属性包含单吃的所有元素

7、伪类选择器

a:link默认选择器

a:hover鼠标悬停样式

a:active元素被激活

a:visited点过的链接

8、

p:nth-child(3){}意思是p中第3个改变，隔行变换

：checked:选中所有被选中的元素

9、层叠性

类>标签>id 就近原则谁离的近就选谁

如果样式冲突，就选择就近原则。哪个样式近就执行哪个样式

如果样式不冲突就不重叠

10、继承性你在我里边你就得听我的^ ^

子标签能继承父标签的某些样式

权重：继承的样式权重为最低，行内样式权重最高，如果权重相同就又用就近原则

！important可以改变权重（加在样式里边）无限大

css常用的单位

1、px像素，绝对单位。一个像素代表一个点，如100px*100px的正方形，宽度100个点，高度100个

点

2、em相对单位，它会参考它的父系元素。字体，父级元素的字体为16px，要设置元素的字体大小为

2cm，当前元素的字体大小就是32px

3、rem相对单位。由页面决定。当我们改变了浏览器的字号设置，页面的字号也会随之发生改变，应

用在老人版

4、百分比，相对于父级元素的比例

补充

css
标签选择器用标签名
类选择器用.class名
ID选择器用#ID名

css层叠性：如果样式冲突，遵循就近原则
若不冲突，同时继承

类>标签>ID
. >标签 >#

a:link{}默认
a:hover{}鼠标悬停
a:active{}被激活时
a{ font-size: }大小

for="username"
name="username" id="username"

练习题

用HTML制作表格并用css进行修饰

HTML代码

<!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>
    <link rel="stylesheet" href="7106.css">
</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="请输入邮箱"></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="text" 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" name="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="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代码

*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    }
    /* 设置背景图片 */
    body{
    background: url(v.png)no-repeat center;
    background-size: 100% 100%;
    }
    /* 设置layout */
    .rg_layout{
    width:900px;
    height:500px;
    border:8px solid #fcbade;
    background-color: rgb(243, 172, 172,0.3);
    /* 让dic水平居中 */
    margin:auto;
    }
    /* 设置左组件 */
    .rg_left{
    margin:15px;
    float:left;
    }
    /* 设置左组件的第一个元素 */
    .rg_left > p:first-child{
    color:antiquewhite;
    font-size: 20px;
    }
    /* 设置左组件的最后一个元素 */
    .rg_left > p:last-child{
    color:#A6A6A6;
    font-size: 20px;
    }
    /* 设置中间组件 */
    .rg_center{
    float:left;
    margin:40px;
    }
    .rg_right{
    float:right;
    }
    .rg_right > p:first-child{
    font-size:15px;
    }
    .rg_right p a{
    text-decoration: none;
    }
    .rg_right p a:hover{
    color:red;
    }
    
    .td_right{
    padding-left: 50px;
    }
    .td_left{
    width:100px;
    text-align: right;
    height:45px;
    }
    #username,#password,#email,#name,#tel,#birthday,#checkcode{
    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;
        }

光标变色

光标变色代码

<!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>
        a:link{
            color:red
        }
        a:hover{
            color:blue
        }
        a:active{
            color:green
        }
        a{
            font-size: 50px;
        }
        span{  
        display:inline-block;
        }
    </style>
</head>
<body>
   <a href="111">超级链接</a>
    
</body>
</html>

总结

今天对于HTML加上css的让我耳目一新，HTML制作的表格就像一幅画，css给它加上了色彩让构图完美