CSS 层叠样式表

网页美观

html相当于原材料，css用来加工好看

如何嵌入？

样式如何显示html元素？

样式通常存储在样式表中

把样式表添加到html元素里

定义CSS方式

1，行内样式，可以使用，但不推荐，只有当当前样式不需要复用的时候可以使用

行内样式优先级较高

​

我是大帅比

​

<!-- 行内样式，内联样式，style表示CSS样式 -->     我真的是大帅比

2，内页样式，

在head里用<style></style>使用。

 <style>         /* 根据标签来命名 */         /* 选择器selector */         /* 标签选择器   可以让页面上所有的P标签都有对应的控制 */         p{             background-color: brown;         }         /* 声明一个样式，并起个名 */         /* 类选择器 用.  类选择器的优先级大于标签选择器*/         div{             background-color: brown;         }         .bg{            background-color: blue;         }         /* id选择器 用#号 */         #sp{             background-color: aqua;         }     </style>

</head>

<body>

​

我是大帅比

        我是大帅比哦    

​

<!-- 类选择器。class是类的意思 -->

​

        我是超级超级大帅比    

​

</body>

3，外部样式（推荐使用）

使用方式和内页样式一样，但放在另外的文件里

<link rel="stylesheet" href="文件目录">

CSS的选择器：

1，标签选择器

2，类选择器， 一个标签元素是科研选择多个样式，样式名中间用空格隔开

3，id选择器

4，并列选择器：

​
​
<style>
  页面上所有的div和p的样式都一样 
​
​
•    div,p{
​
•      
​
•    }
​
 页面上所有的div和p的样式都一样   注意，无论P到div有多少层，只要p的上层中有div存在，p都会改变 
​
•    div p{
​
•      
​
•    }
​
 只能选中div子元素的p，不能是更下层的元素
        div>p{
            
        }
选中div紧邻下方的p，只能是同级元素 
        div+p{
            
        }
​
</style>

5，属性选择器

<style> /* 属性选择器 ，选中页面上所有带有type属性的标签，用英文的[]选中 */ [type=text]{ background-color: bisque;
    }
    
  选中页面上选中某个属性，包涵单词的所有元素
  [type~=单词]{
  
  }
  一般用class
  [class~=单词]{
  
  }

</style>

6, 伪类选择器

<style>
        /* 链接颜色 */
        a:link{
            color: red;
        }

​ /* 鼠标悬停样式 */ ​ a:hover{ ​ color: aqua; ​ }

​ /* 元素被激活 */ ​ a:active{ ​ color: antiquewhite; ​ }

​ ​ /* 点过的链接 */ ​ a:visited{ ​ color: blueviolet; ​ }

</style>

7，

从很多个元素中选中其中一个 元素名比如 li 则：

li:nth-child(第几个数字，甚至可以是表达式，比如3n，代表3的倍数) {}

注：整个界面中所有符合要求的的li都会被选中。

8， ：属性 选中所有属性的元素·

CSS层叠样式表优先级的问题

优先级原则是就近原则，哪个样式离结构本体近，就执行哪个，所以行内样式的优先级最高，但如果样式不冲突，就不层叠

例：

    .a{
​
•               背景：红
​
•               字体颜色：蓝
​
}
​
•           .b{
​
•           字体颜色：绿
​
}
    <div class="a b">我是div</div>

则背景为红，字体颜色为绿

CSS的继承原理

字标签在没有其他样式的情况下，会继承父辈的某些样式，

继承的样式权最低，也就是优先级最低。

行内最高。

权重相同则就近原则。

但权重不是固定的，使用 !importart 这个代码的权重是无限大

添加方法为

.a{

字体颜色：蓝!importart ；

}

.b{

字体颜色：绿；

}

    <div class="a b">我是div</div>

字体就是蓝色的了

CSS常用单位

1，px像素，绝对单位，一个像素代表一个点，。

2，em是相对单位。它会参考它的父级元素。

例：字体，父级元素字体为16px，要设置元素字体大小为2em，当前元素的字体大小就是32px

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

4，百分比：相对于父级元素的比列。

CSS属性：

1，block 区块

行高 line-height:     数值 | inherit | normal;
字间距 letter-spacing:     数值 | inherit | normal;
词间距 word-spacing:    数值 | inherit | normal;
空格 white-space:    pre(保留) | nowrap(不换行) | normal;
/*表格宽度自适应*/
th {
white-space: nowrap;
}
display:
none; /*不显示，使用的场景非常多*/

block; /*把内联标签变成块级标签*/

inline; /*把块级标签变成内联标签*/

list-item; /*列表项*/

run-in; /*追加部分*/

compact; /*紧凑*/

marker; /*标记*/

table;

inline-table;

table-raw-group;

table-header-group;

table-footer-group;

table-raw;

table-column-group;

table-column;

table-cell;

table-caption; /*表格标题*/

2. box 盒子

width 和 height ：表示内容区的宽和高

margin : 外边距 表示元素距离上一个元素的位置，若没有，则是距离窗体的距离

padding ： 内边距 本元素内部空出的距离

border ： 边框线

宽度 **width**:           长度 | 百分比 | auto;

高度 **height**:         长度 | 百分比 | auto;

清除 **clear**:           none | left | right | both;

边界 **margin**:          上 右 下 左 ;

填充 **padding**:           上 右 下 左 ;

定位 **position**:           absolute | relative | static;

透明度 **visibility**:         inherit | visible | hidden;

溢出 **overflow**:           visible（现实） | hidden（隐藏） | scroll auto（滚动）;

裁切 **clip**:             rect(12px,auto,12px,auto)

3， position 定位

一般用来写网页顶端的固定导航条，或者两侧的菜单。

<!--对于块级标签来说加上position:fixed之后，该div就不会占一整行，一般需要手动定义宽度，如width:100%-->

<div style="position:fixed; height:10%;  color:white; width:100%; top:0px;">我是导航</div>

<div style="">

    <div style="position:fixed; bottom: 0px; top:10%; float:left; width:20%; background-color:indianred">我是菜单</div>

    <div style="float: right;  width:80%;">

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

    </div>

</div>

absolute与relative

这两者一般配合使用，用于调整div之间的相对位置

absolute 绝对定位 当前的文档流可以理解为浮起来，不占位置，

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

relative 相对定位 与absolute相同，但不浮起来，占位置

不常用的两个：

static 文档流（默认，不设置就是他）

float 浮动 浮动的元素会脱离原本的文档流，造成父元素的高度坍塌，包围图片和文本的div不占据空间，使用了浮动的元素，后面紧跟它的元素会错乱

<div style="position:relative; width: 300px; height: 150px;">

    <div style="position:absolute; float: left; width: 20%;  bottom: 0px; right: 0px;">我是菜单</div>

</div>

4， float 漂浮

漂浮 float: left | right | none; 在页面布局的时候用的最多

常见用法

<div style='background-color:red;float:left;width: 50%;' >div1</div>

<div style='background-color:green;float:right;width: 50%;' >div2</div>

一个问题

子标签使用了float时候，父标签的样式失效

<div style='background-color:red;'>

    <div style="float: left">div1</div>

    <div style="float: left">div2</div>

</div>

解决方案一：clear: both 清除浮动

<div style='background-color:red;'>

    <div style="float: left">div1</div>

    <div style="float: left">div2</div>

    <div style="clear: both;"></div> <!--加上clear：both之后就正常了-->

</div>

解决方案二：clearfix

<div style='background-color:red;' class="clearfix">

    <div style="float: left">div1</div>

    <div style="float: left">div2</div>

</div>

.clearfix:after{

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}

5，透明度

.image{

    opacity: 0.5

}

<img src="图片地址" style="opacity: 0.5; width:50%; height:50%; "

6，font 字体

		颜色 color: 数值;
大小 font-size: 数值;

字体 font-family:

				"Courier New",

				Courier, monospace,

                "Times New Roman",

                Times,

                serif,

                Arial,

                Helvetica,

                sans-serif,

                Verdana

样式 font-style:   oblique;(偏斜体)

				   italic;(斜体)

                   normal;(正常)

粗细 font-weight:   bold;(粗体)

					lighter;(细体)

                    normal;(正常)

变体 font-variant: small-caps;(小型大写字母)

					normal;(正常)

7，background 背景

背景 background: transparent; /透视背景*/ ​ 颜色 background-color: 数值; ​ 图片 background-image: url() | none; ​ 重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

background-repeat : repeat; /*重复排列-网页默认*/

background-repeat : no-repeat; /*不重复排列*/

background-repeat : repeat-x; /*在x轴重复排列*/

background-repeat : repeat-y; /*在y轴重复排列*/

滚动 background-attachment: fixed | scroll; 位置 background-position:数值 | top | bottom | left | right | center;

background-position : 90% 90%; /*背景图片x与y轴的位置*/

background-position : top; /*向上对齐*/

background-position : buttom; /*向下对齐*/

background-position : left; /*向左对齐*/

background-position : right; /*向右对齐*/

background-position : center; /*居中对齐*/

简写 background:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;

8，border 边框

边框样式

	**border-style: dotted;(点线)**

​							**dashed;(虚线)** 

​							**solid;（实线）** 

​							**double;(双线)** 

​							**groove;(槽线)** 

​							**ridge;(脊状)** 	

​							**inset;(凹陷)** 

​							**outset;**

**边框宽度      border-width: ;**

**边框颜色      border-color: top值 right值 bottom值 left值;**

**简写         border: width style color;

边框线间距     border-spacing: 0;
边　　框 {border:border-width border-style color}

上 边 框 {border-top:border-top-width border-style color}

右 边 框 {border-right:border-right-width border-style color}

下 边 框 {border-bottom:border-bottom-width border-style color}

左 边 框 {border-left:border-left-width border-style color}

9 list-style 列表样式

类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;

list-style-type:none; /*不编号*/

list-style-type:decimal; /*阿拉伯数字*/

list-style-type:lower-roman; /*小写罗马数字*/

list-style-type:upper-roman; /*大写罗马数字*/

list-style-type:lower-alpha; /*小写英文字母*/

list-style-type:upper-alpha; /*大写英文字母*/

list-style-type:disc; /*实心圆形符号*/

list-style-type:circle; /*空心圆形符号*/

list-style-type:square; /*实心方形符号*/

位置 list-style-position: outside | inside; 图像 list-style-image: URL; 简写 list-style:目录样式类型 | 目录样式位置 | url;

10，margin 边界

margin-top:10px; (上边界)

margin-right:10px; (右边界)

margin-bottom:10px; (下边界值)

margin-left:10px; (左边界值)

margin-inside:;

margin-outside:;

11， padding 填充

padding-top:10px; /*上边框留空白*/

padding-right:10px; /*右边框留空白*/

padding-bottom:10px; /*下边框留空白*/

padding-left:10px; /*左边框留空白

12， vertical 垂直

vertical-align:sub; /*下标字*/

vertical-align:super; /*上标字*/

vertical-align:top; /*垂直向上对齐*/

vertical-align:bottom; /*垂直向下对齐*/

vertical-align:middle; /*垂直居中对齐*/

vertical-align:text-top; /*文字垂直向上对齐*/

vertical-align:text-bottom; /*文字垂直向下对齐*/

13 a 链接

a /*所有超链接*/

a:link /*超链接文字格式*/

a:visited /*浏览过的链接文字格式*/

a:active /*按下链接的格式*/

a:hover /*鼠标转到链接*/

14 cursor 光标

光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize;
​
/*也可以自定义*/
cursor: hand; /*链接手指*/
cursor: crosshair /*十字体 */
cursor: s-resize /*箭头朝下 */
cursor: move /*十字箭头, 朝右*/
cursor: help /*加一问号 */
cursor: w-resize /*箭头朝左 */
cursor: n-resize /*箭头朝上 */
cursor: ne-resize /*箭头朝右上 */
cursor: nw-resize /*箭头朝左上 */
cursor: text /*文字型*/
cursor: se-resize /*箭头斜右下 */
cursor: sw-resize /*箭头斜左下*/
cursor: wait /*漏斗*/

15,隐藏

    visibility:hidden;元素隐藏
 

2022年7月10 第四组 周鹏 CSS的基本认识的更多相关文章

  1. Java学习笔记：2022年1月10日

    Java学习笔记:2022年1月10日 ​ 摘要:这篇笔记主要记录了学习<Java核心技术 卷一>的第四章时的一些心得,主要阐述了对象与类这一部分的内容.需要注意的是,这一章的内容需要精心 ...

  2. JZOJ2020年8月10日提高组T3 玩诈欺的小杉

    JZOJ2020年8月10日提高组T3 玩诈欺的小杉 题目 Description 是这样的,在小杉的面前有一个N行M列的棋盘,棋盘上有\(N*M\)个有黑白棋的棋子(一面为黑,一面为白),一开始都是 ...

  3. JZOJ8月10日提高组T2 Fix

    JZOJ8月10日提高组T2 Fix 题目 Description There are a few points on a plane, and some are fixed on the plane ...

  4. 【GDOI2007】JZOJ2020年8月10日提高组T1 夏娜的菠萝包

    [GDOI2007]JZOJ2020年8月10日提高组T1 夏娜的菠萝包 题目 Description 夏娜很喜欢吃菠萝包,她的经纪人RC每半个月就要为她安排接下来的菠萝包计划.今天是7月份,RC又要 ...

  5. JZOJ8月10日提高组反思

    JZOJ8月10日提高组反思 T1 没想到怎么打 就去打暴力了 本来想拿个30不错了 结果\(AC\)了 话说回来,数据也挺小的 T2 不AC便爆0 就一个数据点 给不给打暴力的人活了 正解是状压DP ...

  6. 2022年7月13日，第四组 周鹏 JAVA认识的第一天，附加一个用JS写的计算器代码

    心情:╭(╯^╰)╮ ╮(╯﹏╰)╭ (╯﹏╰)b 罒ω罒 |*´Å`)ﾉ ( Ĭ ^ Ĭ ) (ㄒoㄒ) o(╥﹏╥)o /(ㄒoㄒ)/~~ (〒︿〒) ┭┮﹏┭┮ ε(┬┬﹏┬┬)3 ε(┬┬﹏┬ ...

  7. 2022年7月14日，第四组 周鹏，认识JAVA的第二天(；´д｀)ゞ(；д；)

    那天,我遇到了JAVA 然后,我失去了头发 无论我用了多少办法 还是放不下那个它 我哭的像个傻瓜 但也没能留住它 如果再有一次从来 我愿为它披上薄纱 愿它安稳有个家 可我终究还是失去了它 失去了原本为 ...

  8. 2022年7月9日 第四组 周鹏 HTML的初认识

    <!DOCTYPE html> <html lang="en"> <!--      文档的根标签 --> <head>     & ...

  9. 【每日一题】2022年2月10日-NC160 二分查找-I

    描述请实现无重复数字的升序数组的二分查找 给定一个 元素升序的.无重复数字的整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标(下标 ...

随机推荐

  1. JSP实现登录功能（页面带样式）

    功能要求 1.完成两个页面 2.第一个登陆页面login. jsp 3.第二个用户管理页面useManage. jsp 4.有登录功能(能进行用户名密码的校验,用户名若为自己的学号密码为班级号,允许登 ...

  2. HDU1712 ACboy needs your help（分组背包）

    每种课程学习不同天数可以获得不同价值,这可以看成一个组,那么题目就是分组背包的模板题了. 1 #include<cstdio> 2 #include<cstring> 3 #i ...

  3. 【linux】 第1回 linux运维基础

    目录 1. 运维的本质 2. 电脑与服务器 2.1 电脑的种类 2.2 服务器种类 2.3 服务器品牌 2.4 服务器尺寸 2.5 服务器内部组成 3. 磁盘阵列 4. 系统简介 5. 虚拟化 6. ...

  4. [leetcode]95.不同的二叉搜索树

    Posted by 微博@Yangsc_o 原创文章,版权声明:自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0 95. 不同的二叉搜索树 II 给你 ...

  5. 十一、Pod的健康检查-探针

    Pod 的健康检查-探针 一.Pod 的健康检查-探针 1.1.探针基本概念 ​探针是由 kubelet 对容器执行的定期诊断.要执行诊断,kubelet 调用由容器实现的 Handler 有三种类型 ...

  6. 快读《ASP.NET Core技术内幕与项目实战》WebApi3.1：WebApi最佳实践

    本节内容,涉及到6.1-6.6(P155-182),以WebApi说明为主.主要NuGet包:无 一.创建WebApi的最佳实践,综合了RPC和Restful两种风格的特点 1 //定义Person类 ...

  7. 搭建harbor私有仓库

    2-1.项目说明  Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,由VMware开源,其通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源 Docke ...

  8. tcp网络交互的理解 以及代码实现

    服务端 import socketserver = socket.socket(socket.AF_INET, socket.SOCK_STREAM)server.bind(("127.0. ...

  9. mysql 在连接表中的要点

    思路:分析需求,分析字段来自哪些表 (连接查询)            确定使用哪种连接查询?  确定交叉点(这两个表中哪些数据是相同的)            判断条件 such as  学生表中的 ...

  10. 如何使用zx编写shell脚本

    前言 在这篇文章中,我们将学习谷歌的zx库提供了什么,以及我们如何使用它来用Node.js编写shell脚本.然后,我们将学习如何通过构建一个命令行工具来使用zx的功能,帮助我们为新的Node.js项 ...