CSS层叠式样式表学习笔记

最新推荐文章于 2021-04-16 14:47:01 发布

死磕的斯坦张

最新推荐文章于 2021-04-16 14:47:01 发布

阅读量322

点赞数

分类专栏：大前端文章标签： css html css3

本文链接：https://blog.csdn.net/david2000999/article/details/104555918

版权

大前端专栏收录该内容

65 篇文章 10 订阅

订阅专栏

CSS

CSS和HTML分开的优点

HTML负责基本的内容展示，而CSS负责样式的控制，制造效果。
1、实现解耦合的作用
2、使得协作更加明确
3、开发效率得到提高

CSS和HTML的结合方式

内联：就是在想要控制样式的的标签内直接控制，只能作用于该部分，范围最小。

内部：直接在head内部中控制该文件的样式。

外部：通过link标签链接一个外部的css文件，而控制方式就直接书写在这个外部css文件中。

CSS的基本语法

格式：
选择器{
属性：属性值;
属性：属性值;

}

选择器：就是用于筛选特征相似的元素

基础选择器：

id选择器：#id属性值{}
优先级很高，只能渲染一次
元素选择器：直接筛选元素相对应的内容
类选择器：class属性值{}
优先级中等，可以渲染多次
优先性上id>calss>元素
在这里插入图片描述

扩展选择器：

通用选择器：*{}选择所有元素
并集选择器：选择器1，选择器2{}
子集选择器：选择器1 选择器2{}
父集选择器：选择器1>选择器2（选择选择器2上的选择器1）
属性选择器：元素名称[属性=“属性值”]{}
伪类选择器：元素：状态{}

链接伪类选择器
一链接伪类选择器注意事项.
二链接伪类选择器实际开发中的写法.
链接伪类选择器注意事项

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
记忆法：love hate 或者 lv 包包 hao 。
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

/* a 是标签选择器 所有的链接 */ 
 a { 
 color: gray;
 }
 /* :hover 是链接伪类选择器 鼠标经过 */
 a:hover { 
 color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
 }

:focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

input:focus { 
 background-color:yellow;
}

状态：linked:初始化
hover:鼠标悬浮状态
active：鼠标点击但是未打开状态
visited:访问过状态
在这里插入图片描述

CSS属性

字体（Font）属性

font-size：字体大小
font-family：字体系列
font-weight:字体粗细，400代表去除加粗
font-style:代表是否斜体，normal/italic
字体复合属性

body { 
 font: font-style font-weight font-size/line-height font-family; }

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
在这里插入图片描述

文本（Text）属性

color：文本的颜色
text-align：对其方式
line-height：行高
text-decoration:是否有下划线
text-indent：文本缩进（2em即两个字体单位）
在这里插入图片描述

边框（Border）属性

border：设置边框，复合属性

尺寸(Dimension) 属性

width：设置宽度
height：设置高度

背景（background）属性

background：设置背景，复合属性
background-color:颜色值;

background-color:transparent;

background-image
属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置.

background-image : none | url (url)

background-repeat：背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

background-position：背景位置

background-position: x y;

参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
参数是精确单位
如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

background-attachment：背景固定

background-attachment : scroll | fixed

背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量. 当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top ;

在这里插入图片描述

CSS 的元素显示模式

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，
其中 <div> 标签是最典型的块元素。

块级元素的特点：
① 比较霸道，自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素。
注意：

 文字类的元素内不能使用块级元素
 <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
  同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、
<span>等，其中<span> 标签是最典型的行内元素。
有的地方也将行内元素称为内联元素。

行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
注意：
链接里面不能再放链接
特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，
它们同时具有块元素和行内元素的特点。
有些资料称它们为行内块元素。

行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
在这里插入图片描述

元素显示模式转换
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

Chrome浏览器调试

在这里插入图片描述

登录案例

HTML展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/注册页面样式表.css">
</head>
<body>
<div class="rg_layout">
    <!--左侧注册提示-->
    <div class="rg_left">
        <p class="rg_left_chinese">新用户注册</p>
        <p class="rg_left_english">USER REGISTER</p>
    </div>
    <!--中间填写注册信息-->
    <div class="rg_center">
        <div>
            <form>
                <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="phone">手机号</label></td>
                        <td class="td_right"><input type="text" name="phone" id="phone" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td class="td_left">性别</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">出生日期</td>
                        <td class="td_right">
                            <input type="date" name="birthday" id="birthday">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right">
                            <input type="text" name="checkcode" id="checkcode">
                            <img id="img_check" src="img/verify_code.jpg"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <input id="btn_sub" type="submit" value="注册">
                        </td>
                    </tr>

                </table>
            </form>
        </div>
    </div>
    <!--右侧登陆提示-->
    <div class="rg_right">
        <p class="rg_right_login">已有账号?<a href="#">立即登陆</a></p>
    </div>

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

CSS展示

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

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

.rg_layout{
    width: 900px;
    height: 500px;
    border: 8px solid #EEEEEE;
    background-color: white;
    /*让div水平居中*/
    margin: auto;
    margin-top: 25px;
}

.rg_left{
    /*border: 1px solid red;*/
    float: left;
    margin: 15px;
}
.rg_left_chinese{
    color:#FFD026;
    font-size: 20px;
}
.rg_left_english{
    color:#A6A6A6;
    font-size: 20px;

}

.rg_center{
    /*border: 1px solid red;*/
    float: left;
    margin: 15px;
}
.td_left{
    width: 100px;
    text-align: right;
    height: 45px;
}
.td_right{
    padding-left: 50px ;
}
#username,#password,#email,#name,#phone,#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;
    margin-top: 15px;
    margin-left: 50px;
    background-color: #FFD026;
    border: 1px solid #FFD026 ;
}

.rg_right{
    /*border: 1px solid red;*/
    float: right;
    margin: 15px;
}
.rg_right_login{
    font-size: 15px;
}
.rg_right_login a{
    color: pink;
}

在这里插入图片描述

死磕的斯坦张

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠式样式表学习笔记

CSS和HTML分开的优点HTML负责基本的内容展示，而CSS负责样式的控制，制造效果。1、实现解耦合的作用2、使得协作更加明确3、开发效率得到提高CSS和HTML的结合方式内联：就是在想要控制样式的的标签内直接控制，只能作用于该部分，范围最小。内部：直接在head内部中控制该文件的样式。外部：通过link标签链接一个外部的css文件，而控制方式就直接书写在这个外部css文件中。...
复制链接

扫一扫