前端CSS基础笔记

最新推荐文章于 2023-12-09 03:00:00 发布
最新推荐文章于 2023-12-09 03:00:00 发布
阅读量175 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Toublemaker_/article/details/88673926
版权

外联样式

在head中通过link标签来引入外部的css样式文件
语法
<head> <link href="CSS文件的路径" rel="stylesheet" /></head>
注意

  • link 是个单标签
  • 该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

font简写时候的注意事项

  • 在font简写的时候，font-size和font-family一定要写，其他两个可选
  • font-size和font-family的顺序不能调换，一定要在最后面，font-size要在font-family的前面

文本水平位置 text-align（left/right/center）

  • 对于独占一行的元素，设置里面的文本水平位置，只需要给这个元素本身设置text-align属性；
  • 对于一行可以显示多个的元素，如果需要设置其水平位置，那么需要给其父元素设置text-align属性

类和id的命名规则

规则

  • 命名中可以包含字母、数字、下划线、短横线
  • 命名不能以数字开头
  • 命名不能以使用单个短横线，单个下划线可以
  • 命名不能使用短横线加数字开头

建议

  • 类和id的命名尽可能有意义
  • 如果是多个单词组成的词，尽可能使用驼峰命名法
    （驼峰命名法：当多个单词组成一个词的时候，第一个单词的首字母小写，后面每个单词的首字母大写）

复合选择器

  • 后代选择器
    语法：
    选择器1 选择器2 选择器3 …{
    属性: 属性值
    }
    用选择器与选择器之间空格隔开
  • 子代选择器
    语法：
    选择器1>选择器2>选择器3>+…{
    属性: 属性值
    }
    用选择器与选择器之间>隔开
  • 交集选择器
    语法
    选择器1选择器2选择器3 …{
    属性: 属性值
    }
    注意：选择器连在一起
    如果交际选择器有标签选择器，那么标签选择器一定写在前面
  • 并集选择器
    语法：
    选择器1,选择器2,选择器,3 …{
    属性: 属性值
    }
    注意：用,隔开
    一般在css初始化的时候，或者是给不同的元素设置相同的样式的时候使用最多
  • 兄弟选择器
    只能选择相邻的下一个兄弟元素
    语法
    选择器1+选择器2+选择器3+ +…{
    属性:属性值;
    }

常见的元素的三种显示方式

  • 行内元素
    display: inline;

特点
1.一行可以显示多个
2.大小由内容决定
3.不能设置有效宽高

常见行内元素 span a em ins del strong img(可设宽高)
水平居中 给父元素的块级元素设置text-align:center

  • 块级元素
    display:block

特点
1.独占一行
2.可以设置有效宽高

常见块级元素 h1~h6 div ul li ol dd dt dl p div
文本居中，直接设置

  • 行内块级元素
    display: inline-block

特点
1.一行可以显示多个
2.能设置有效宽高

常见的行内块级元素 input select textarea
水平居中 给父元素的块级元素设置text-align:center

  • 空元素
    <br><hr> <img> <input> <link> <meta>
    鲜为人知的是：
    <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

css三大特性

  • 层叠性
    对于同一个元素的同一个属性后面的样式会覆盖前面的样式，优先级高的会覆盖优先级低的
    （长江后浪推前浪）
  • 继承性
    后代元素能获得父辈元素的某一些样式（龙生龙，凤生凤，生下老鼠会打洞）
    继承的特殊情况
    1.a标签的颜色不能继承
    2.h系列标签不能继承字体粗细 ，字体大小也不能继承
  • 优先级
    优先级顺序
    继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
    important只能提高单个属性的优先级，不能提高整个选择器的优先级

复合选择器的权重计算

复合选择器的权重计算：4个n算法（n n n n）
第一个n表示的是！important的个数
第二个n表示的是id选择器的个数
第三个n表示的是类选择器的个数
第四个n表示的是标签选择器的个数
在这里插入图片描述
110>20
#1比较的时候从左边的第一个n开始比较，如果比较的哪一个n大，那么就是这个选择器的权重大，后面的n不需要在比较，如果第一个n相等，那么继续比较第二个n，以此类推。
#2如果遇到的了!important的时候，一定要特别小心，因为!important只对一个属性有效，而不是整个选择器
#3如果父元素中有!important，而子元素是继承元素的样式，那么这个!important对子元素是无效的

background（css背景）

  • background-color
    背景颜色

  • background-image
    背景图片地址

  • background-repeat
    是否平铺

  • background-position
    背景位置
    参数
    length 百分数 由浮点数字和单位标识符组成的长度值
    position （top center right left bottom）

  • 背景图片的位置设置
    background-position: center center; 水平垂直居中
    说明

    • 设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。

    • 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%（默认居中）。第二个值将用于纵坐标。（如果只设置一个值，另一个方向默认居中）

    • 如果设置两个值，那么设置 的值就是表示相对应的方向

      背景图片位置设置 使用具体的数字

    • 如果设置一个值，这个值表示水平方向，垂直方向默认居中

    • 如果设置两个值，第一个值表示水平方向，第二个值表示垂直方向
      (正值为向下向右移动，负值为向上向左移动）

    注意：

    • 我们可以使用方位名词， 如果只写一个方位名词， 那么另外一个默认居中对齐。 他们不分顺序 top left 和 left top是一样

    • position 后面是x坐标和y坐标。 也可使用 精确单位。但是他们有顺序 10px 50px 和 50px 10px 不一样的

    • 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则
      15px 一定是 x坐标 top是 y坐标。

  • background-attachment
    背景固定还是滚动
    参数
    scroll 背景图像是随对象内容滚动
    fixed 背景图像固定

  • backgorund-size
    设置背景图片的大小由两种设置方法
    一种是自定义px或者%（注意是否等比例，尽量不要修改原始图片的比例值），%参照父容器的大小
    如 background-size:100px 100px
    另一种是是系统提供的值

    • cover 等比放大到容器大小（将素材图片全部的包含在容器中等比例），直到最短边触底
    • contain 等比放大到容器大小（将素材图片覆盖整个容器，但是只需要其中一个方向，全部包含就行），直到最长边触底（会留白）

  • backgrund-origin
    设置背景图片从哪里开始显示 我们把一个元素分为三个部分 border padding content-width 这个属性就是用来设置背景图片 三个部分开始显示的
    设置背景图片的平铺原点（左上角）

    • border-box 从边框部分开始显示
    • padding-box 从padding部分开始显示 默认值
    • content-box 从内容部分开始显示

  • backgorund-clip
    背景裁剪， 一个元素分为三个部分 border padding content-width（设置的是裁切，控制的是显示）
    设置背景图片的显示范围，增大元素的响应区域
    该属性控制背景从哪个部分 开始 向外裁剪

    • border-box 从边框部分开始显示 默认值
    • padding-box 从padding部分开始显示
    • content-box 从内容部分开始显示

背景的合写（复合属性）
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

盒子水平垂直居中

水平居中

 div {
 	width:200px;
 	margin:0 auto;
    }

水平居中

   div {
 	position: absolute;
 	width: 300px;
 	height: 300px;
 	margin: auto;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	right: 0;
 	background-color: pink;	/* 方便看效果 */
 }

水平垂直居中

 div {
 	position: relative;		/* 相对定位或绝对定位均可 */
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
 	background-color: pink;	 	/* 方便看效果 */

  }

水平垂直居中

  div {
 	position: absolute;		/* 相对定位或绝对定位均可 */
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	background-color: pink;	 	/* 方便看效果 */

 }

水平垂直居中

  .container {
 	display: flex;
 	align-items: center; 		/* 垂直居中 */
 	justify-content: center;	/* 水平居中 */

 }
 .container div {
 	width: 100px;
 	height: 100px;
 	background-color: pink;		/* 方便看效果 */
 }

外边距合并（margin塌陷）

  • 相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

  • 嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方法

  1. 可以为父元素定义1像素的上边框或内边距
  2. 可以为父元素添加overflow: hidden; （触发了css中的bfc，会给一个父元素的盒子形成一个闭封的区域块）

去除图片标签的基线的方法

  • 将图片设为块状元素，display: block
  • 将文本的字体大小设为0，font-size: 0
  • 设为底部/顶线/中线对齐，vertical-align: bottom | top | middle;

设置或检索对象内容的垂直对其方式

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
在这里插入图片描述

文本溢出处理

保证文本在一行显示
white-space:nowrap
隐藏溢出文本
overflow:hidden;
使用省略号替代
text-overflow : ellipsis;

浮动特点

  • 脱标，不占标准流位置
  • 浮动元素改变元素的显示方式（特别针对行内元素），块级元素显示方式不变，但是呈现行内块级元素的特点
  • 浮动元素是以元素的顶部对齐，跟元素的高度无关，不会以底部对齐
  • 如果元素有包含关系，子元素浮动不会占据父元素的border和padding的位置
  • 如果一个标准流的盒子下面很一个浮动的盒子，那么这个浮动的盒子只能在标准流的下面左右浮动，不会和标准流的盒子同一行显示

清除浮动的方法

  • 额外标签法
    通过在浮动元素末尾添加一个空的标签
    <div style="clear:both"></div>
    后面的元素能消除前面元素的影响，清除元素只能使用块级元素
  • 父级元素添加overflow属性的方法
    可以通过触发BFC的方式，实现清除浮动效果
    可以给父级添加overflow为hidden|auto|scroll都可以实现
  • 使用after伪元素清除浮动
 .clearfix::after {
            content: "";
            /*伪元素必须配合content使用*/
            display: block;
            /*清除浮动需要使用块级元素*/
            clear: both;
            /*清除浮动的方法*/
            height: 0;
            /*将伪元素中的内容撑出来的高度去除*/
            line-height: 0;
            /*为了浏览器更好的兼容*/
            visibility: hidden;
            /*隐藏content里面的内容*/
        }

        .clearfix {
            *zoom: 1;
            /*IE6,7专有*/
        }
  • 使用before和after双伪元素清除浮动
     .clearfix::before,.clearfix::after{
            content: "";
            display: table
        }
        .clearfix::after{
            clear: both;
        }
        .clearfix{
            *zoom: 1;
        }
  • 给父元素设置高度

初始化框架

  • nec框架
  • Normalize.css

定位模式

  • 静态定位
    position:static（默认）
  • 绝对定位
    position:absolute
    特点
    绝对定位的元素脱标，不占标准流位置
    觉得定位的元素能改变行内元素的显示方式
    如果元素有包含关系
    子元素绝对定位，父辈元素都是静态定位，那么这个绝对定位的子元素参照浏览器来移动位置
    子元素绝对定位，父辈元素中有非静态定位，那么这个绝对定位的子元素参照这个非静态定位的父辈元素
    （有奶便是娘）
    子元素绝对定位，父辈元素中有多个非静态定位的元素，那么这个绝对定位的子元素参照离自身最近的一个父辈元素来移动位置
  • 相对定位
    position:relative
    特点
    相对定位可以设置有效的偏移值
    相对定位元素没有脱标，还在标准流里面
    相对定位不能改变元素的显示方式
    相对定位元素参照元素本身原来的位置移动（参照自己本身移动）
  • 绝对定位
    position:fixed
    特点
    脱标，不占位置
    能改变元素的显示方式（行内元素）
    始终都是参照浏览器做位置移动

引入ico图标

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

vscodel快捷输入link:favicon
她(它)不是iconfont字体哦 也不是图片。
位置是放到 head 标签中间。
后面的type=“image/x-icon” 属性可以省略。
为了兼容性，请将favicon.ico 这个图标放到根目录下。

logo优化

  • logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要
  • h1里面在放一个连接，给连接一个 大小 和 logo 的背景图片
  • 连接 里面要放文字， 但是文字不要显示出来， 要用 text-indent 移到盒子外面text-indent: -9999px 然后overflow:hidden或者font-size:0
  • 最后给 连接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了

三角形的制作

.box{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px;
            border-top-color: #000;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
        }
Toublemaker_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端笔记CSS
m0_59649050的博客
07-07 109
前端CSS，持续更新中
前端 CSS 基础笔记
weixin_45214689的博客
07-09 321
css 基础笔记
CSS
zhouxing的博客
09-22 184
什么是 CSS? CSS 指层叠样式表 (CascadingStyleSheets) 样式定义如何显示HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在CSS 文件中 多个样式定义可层叠为一个 CSS语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（prope...
前端css笔记
qq_39041201的博客
05-13 111
自己学习前端的一些CSS笔记 普通标签 和 语义化标签 <b>加粗</b> 同 <strong>加粗</strong> <i>斜体</i> 同 斜体 <s>删除线</s> 同 <del>删除线</del> <u>下划线</u> 同 <ins>下划线</ins> 格式化标签(能识别空格和换行) <
css课堂笔记前端css课堂笔记
08-05
CSS课堂笔记 本文档详细介绍了CSS的基本概念、语法、选择器、导入方式等知识点，为读者提供了系统的CSS...CSS是前端开发的基础技术，本文档为读者提供了系统的CSS基础知识，希望读者可以通过本文档快速掌握CSS技术。
前端三件套css学习笔记分享
最新发布
02-24
前端三件套css学习笔记分享
html+css学习笔记 前端 CSS html
11-02
学习了一个月的前端笔记
前端css核心笔记
04-15
网页前端的css笔记，对于java程序员，前端也要学习一下，所以html,css必不可少
web前端CSS学习笔记
09-23
前端笔记CSS第一部分
黑马前端css笔记.zip
08-14
学习黑马前端36期的css笔记，快来下载吧，也可以关注我，联系我。
前端笔记——CSS（持续更新中）~
Mike白的博客
06-20 87
CSS (Cascading Style Sheets) 是一种用于描述网页样式和布局的样式表语言。它与 HTML 配合使用，用于控制网页中元素的外观和排版。 CSS 样式由选择器和声明块组成。选择器指定要应用样式的 HTML 元素，而声明块包含一个或多个属性-值对，定义元素的样式。
前端CSS笔记整理
weixin_44480609的博客
06-01 110
1.骨架 <!--DOCTYPE：告诉浏览器使用什么规范（默认是html）--> <!DOCTYPE html> <!--语言 zh中文 en英文--> <html lang="en"> <!--head标签代表网页头部--> <head> <!--meta 描述性标签，表示用来描述网站的一些信息--> <!--一般用来做SEO（搜索）--> <meta charset="UTF-
前端CSS基础学习笔记
m0_64371862的博客
05-23 115
#博学谷IT学习技术支持# 一、css介绍 css是层叠样式表，作用是给页面中的html标签设置样式，css写在style标签中，style标签一般写在head标签里面，title标签下面。写法：选择器 { css属性 }。常见的属性：文字的颜色color、文字的大小font-size、背景颜色background-color、宽度width、高度height。 二、css引入方式 1.内嵌式 书写位置：css写在style标签中，style标签写在head标签里面，title标签的下面 作用范
【前端】CSS基础（学习笔记）
wmh的博客
12-09 120
HTML只关注内容的语义，但是丑！
前端常用CSS笔记（更新中）
qq_39055970的博客
05-22 480
常用css笔记导读常用标签美化的css方案文字的排版1、文字如何进行上下或者左右居中处理？2、第一行文字的边距 导读 前端在从前经常被后端瞧不起，究其原因，是因为后端对前端的印象还处在html、css和jQuery的时代，认为前端的工作无非就是按照美工的要求实现已有的页面，各种效果也不过是去网上进行复制黏贴，繁琐而又不能够凸显出个人能力。但是其实前端学习深入了，也不会比后端简单。比如vue等框架，将前端的工作进行模块化、组件化和工程化后，大大提高了代码的复用率，项目结构也更加合理，开发也将更加高效，使前端的
前端学习笔记（HTML+CSS）
welkin_fyds的博客
11-26 203
前端学习笔记（HTML+CSS）自己整理的前端学习笔记，仅供参考，有错误欢迎指出
CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）
haobowen的博客
12-05 8653
1. CSS 简介 CSS 的主要使用场景就是美化网页，布局页面的 1.1 HTML 的局限性 说起 HTML ，他只关注内容的语义。比如 <h1> 表明这是一个大标题，<p> 表明这是一个段落，<img> 表明这有一个图片，<a> 表示此处有链接。 虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表（Cascading Style Sheets）的简称 有时我们也称之为 CSS 样
CSS笔记（精简）
weixin_46160720的博客
03-11 4489
CSS笔记 HTML 前端教程 前端笔记
前端开发学习笔记：CSS基础入门
"《页面制作》笔记（5.CSS-1）是网易微专业《前端开发...理解并熟练掌握CSS对于前端开发至关重要，因为它是构建响应式、易维护的网页界面的基础。通过合理地使用CSS，开发者能够创建美观、一致且易于阅读的网页内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值