CSS基础详解一

最新推荐文章于 2024-07-18 17:34:14 发布

编程JAVA小白

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量313

点赞数

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

本文链接：https://blog.csdn.net/weixin_51341922/article/details/122894369

版权

前端知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS基础
   CSS作用
       什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
   CSS语法
       选择器＋声明{属性:值；属性：分号；......}
   CSS选择器
       基本选择器
           id选择器，CSS用#去定义。#＋id值＋{...}。选中指定的id值的html元素，不过id值对于每个html元素都是唯一的。
           类选择器，CSS用.去定义。.＋class值＋{...}。选指定的class值的html元素，class值对于每个html元素不是唯一的。可以帮助我们选定多个html元素。提示：多类名选择器，也就是一个标签可以有多个类名，使用场景是帮助我们提取公共的样式，避免代码冗余和方便后期更新维护。
           标签选择器，CSS用标签去定义。标签＋{...}。直接选中指定标签的元素
       组合选择器
           层级选择器
               后代选择器,语法：选择器1+空格+选择器2{...}。选择器1为父元素选择器。选择器2为后代元素选择器。但凡是父元素指定的后代元素。都会被选中。
               子元素选择器：选择器1+>+选择器2{...}。选择器1为父元素选择器。选择器2为子代元素选择器。就是辈分之隔了一代的亲生儿子。
               相邻元素选择器：选择器1+选择器2{....}。匹配所有紧接在选择器1选中的元素后的选择器2选中的元素
               兄弟元素选择器：和相邻选择器的作用一致，只是语法的＋号变成了~
           过滤选择器：后续补充
           分组选择器和嵌套选择器
               分组选择器:语法是选择器1,选择器2,....选择器n{}。相当于元素的样式并列分配到各个选择器。
               嵌套选择器。选择器1＋类选择器。意思是选择器1选中的元素中还要进一步进行筛选，第二步就是使用类选择器来进行筛选。这个非常常用。
   常用的CSS样式
       背景样式
           background   简写属性，作用是将背景属性设置在一个声明中。
           background-attachment   背景图像是否固定或者随着页面的其余部分滚动。
           background-color   设置元素的背景颜色。
           background-image   把图像设置为背景。
           background-position   设置背景图像的起始位置。
           background-repeat   设置背景图像是否及如何重复。
       文本样式
           line-height   设置行高。提示：这个是设置容纳文本的行的高度（实际上就是内容的高度，不包含内外边距和边框距离）。理解：行高包含三部分，文本高度，上间距，下间距。行高默认是文本高度，那么此时上下间距就为0（表现文字紧贴着行的上下。因为没有上下间距）。而这个行高本质就是用来设置上下间距进而让不同的行有一定的高度差，阅读起来方便。
               典型应用：让文本在盒子内部实现垂直居中。理解：因为行高包含上间距，文字高度，下间距。而上下间距是平局分配的。这样就导致内容永远在整个行高当中是垂直居中的。但是如果盒子的高度不等于行高，因为内容内部不是平均分配高度的。只有让盒子的高度等于行高，那么就可以达到平均分配的效果（文字在内容内部垂直居中）。注意区分内容高度和文字高度。内容高度包含上下间距和文字高度，但内容高度不包含上下内外边距和边框。设置了行高就会让文字在内容内部实现了垂直居中效果，因为行高会平均分配上下间距。但要想实现文字在盒子内部垂直居中的效果，只要让行高的高度（内容的高度）和盒子高度一致即可。
           text-shadow   设置文本阴影
           text-indent   缩进元素中文本的首行
           color   设置文本颜色
           text-align   对齐元素中的文本。注意：这个只能水平对齐(左对齐，右对齐，居中对齐)。只对块级元素生效。对内联元素无效。还有一种划分。只对文本元素和图片元素有效。其他元素无效。当然大多数都是含有文本元素的。
           text-decoration   向文本添加修饰。提示：从设计的角度看 text-decoration属性主要是用来删除链接的下划线。实例：a {text-decoration:none;}
           letter-spacing   设置字符间距。提示：字符包含英文字母和中文
           word-spacing   设置字间距。这个主要用来设置英文单词与单词之间的距离。
       字体样式
           font   在一个声明中设置所有的字体属性
           font-family   指定文本的字体系列
           font-size   指定文本的字体大小。单位有px,em。1em=16px
           font-style   指定文本的字体样式。有正常normal,斜体italic
           font-weight   指定字体的粗细。有更细的lighter,normal正常,粗体bold,更粗bolder
       超链接样式
           超链接自己的特有样式。记忆口诀：L(link)OV(visited)E and H(hover)A(active)TE
               a:link - 正常，未访问过的链接
               a:visited - 用户已访问过的链接
               a:hover - 当用户鼠标放在链接上时
               a:active - 链接被点击的那一刻
           链接的样式，可以用任何CSS属性（如颜色，字体，背景等，一般搭配上面的三个比较多）。
       列表样式
           list-style   简写属性。用于把所有用于列表的属性设置于一个声明中
           list-style-image   将图像设置为列表项标志。值是url("图片路径")和背景图片的值一致
           list-style-type   这个书写是设置列表项的标志的类型。无序列表的一般是是这两个属性值circle，square。有序列表一般是：upper-roman罗马数字，lower-alpha小写英文字母。还有一个none，移出列表项的标志。
           列表的项默认样式：list-style-type:none 属性可以用于移除小标记。默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:
       表格和单元格的样式
           表格的样式
               表格的宽width。这个非常重要，必须设置，否则会影响页面布局。
               边界样式border:1px solid green;分别是边界的粗细，实线或者虚线，还有边界的颜色
               表格里的单元格边框是否合并。boder-collapse:collapse;
           单元格的样式
               单元格边框样式border:1px solid green;分别是边界的粗细，实线或者虚线，还有边界的颜色
               单元格的内边距padding
               单元还可结合其他样式使用，如文本，背景等等
           注意：表头有一个样式height是可以设置表头的单元格的高的
       盒子模型
           总体概述
               所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

CSS box-model
不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
重点：当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。
重点得出的结论：最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左内边距+右内边距+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部内边距+底部内边距+上边框+下边框+上边距+下边距
           边框Border样式
               border-width   简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
               border-style   用于设置元素所有边框的样式，或者单独地为各边设置边框样式。有四个值：dotted: 定义一个点线边框，dashed: 定义一个虚线边框，solid: 定义实线边框，double: 定义两个边框。两个边框的宽度和 border-width 的值相同。
               border-color   简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
                   注意：border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。border要想单独设置起作用必须紧跟在border-style后面。
               border   简写属性，用于把针对四个边的属性设置在一个声明。
               设置值的方式：border-style：属性1，属性2，属性3，属性4

上->右->下->左

border-style：属性1，属性2，属性3

上->左右->下

border-style：属性1，属性2

上下->左右

border-style：属性1

上下左右属性相同。border-color的设置也是如此。
               上面设置值的方式是简写，全写是border-方向-style(color)。方向分别是top,right,bottom,left。你想单独设置那个方向的边框就填哪一个方向。
           外边距margin的样式
               可以分别设置任意一个方向的外边距，语法为：margin-方向:?px;当然也可以简写设置任意一个方向的外边距，方法和边框一致。
               外边距的作用：设置盒子与盒子之间的距离。
               外边距可能会产生的问题：如果一个父元素里面嵌套一个子元素，那么他们的外边距就会自动合并，导致子元素设置margin-top的距离的时候，父元素也跟着子元素的外边距一起下来了，达不到效果，因为他们的外边距合并了。问题简称为嵌套块元素外边距合并问题。
                   解决方法
                       可以为父元素设置边框
                       可以为父元素设置上内边距
                       可以为父元素设置overflow:hidden属性
                       前面两种方法的思路都是上父元素和子元素的外边距分开，不要合并在一起，而第三种解决方法思路暂时不明白，先用着。一般采用第三种，因为前面两种会影响盒子的布局。提示：浮动起来的元素不存在外边距合并问题，因为子盒子浮动起来，父盒子和子盒子的外边距不在同一层，所以不存在外边距合并问题。

           内边距padding的样式，使用和外边距一致(或者说和边框一致)。内边距的作用：设置内容与边框的距离。
               注意：如果元素没有给宽度和高度，我们给的内边距会计算在内容本身的长度中，也就是内边距的长度不会额外加在该元素中。而我们给外边距还要结合内容的宽高合理进行加减分配空间。所以我们该选用外边距还是选用内边距做就有了一条小的衡量标准：如果元素本身不需要给宽高，那么我们可以考虑用内边距来做。如果元素本身需要给宽高，那么用内外边距做都可以，不过我个人习惯用外边距做。
           显示display属性
               在此之前先明白html元素的分类，根据元素的特性分类。
                   块级元素
                       总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
                       宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
                   内联元素
                       和相邻的内联元素在同一行;
                       宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
                   行内块元素
           圆角边框Border-radious样式，作用是可以把我们的盒子从矩形变成圆角的矩形。作用原理：用n个圆形去和该盒子相切，用多少个圆形取决于多少个圆形能把该矩形的四个角都相切完。1.如果原来的盒子是正方形，想切出圆形的话，只要把用于相切的圆设置为宽度和高度一半（或者直接设置为50%也可以，实质只用了一个圆去相切）。2.如果原来的盒子是矩形，想切出圆角矩形，那只要把相切圆的半径设置为高度的一半即可。