CSS基础

最新推荐文章于 2024-10-08 09:33:56 发布

Tournesol-xwx

最新推荐文章于 2024-10-08 09:33:56 发布

阅读量51

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_56127990/article/details/127512194

版权

01.CSS写在哪？

元素标签的"style"属性中
html文档中的<style></style>标签中设置
在.css文件中设置

02.CSS语法格式

CSS语法是由特征和值成对出现
每组特征值之间用英文 ; 隔开
除了在元素标签的style属性设置歪，另外两种写法必须写在大括号内

1.CSS语法

在style属性中（type：value == 特征:值)

<div style="type1:value1";"type2:value2">
</div>

在.css文件或者style标签中

元素选择器{
type1:value1;
type2:value2;
type3:value3;
}

2.CSS选择器

通过元素名称获取
- CSS根据元素名称获取标签，直接写元素名即可
通过元素的id获取
- CSS根据id获取标签，需要在id名前面加上 #
- tips：一个页面的id具有唯一性
通过元素的class获取
- CSS根据class获取标签，需要在class名前面加上 .

3.其他选择器

对页面所有元素进行赋值(*)
对父节点下子节点赋样式
- 方法一：父级子级 (eg: .class img)
  
  tips：获取的是后代标签中所有的标签为img的元素
- 方法二：父级 > 子级(eg: .class>img)
  
  tips:获取的是当前元素下一级中所有标签为img的元素
对当前节点之后的元素赋样式(eg: img3~ img5)

4.伪类选择器

:hover 鼠标经过设置的样式
:active 鼠标按下时设置的样式
:visited 选择已经访问的连接，并设置其样式(只针对"a"标签)

03.CSS优先级

style属性中定义的样式优先级最高
就近原则(同等级别中，越后写级别越高)
id选择器>class选择器>标签选择器

04.常用样式

1.盒子模型

标签元素排列规则是从左往右，从上到下排列
盒子模型结构(margin:外边距；border:边框；padding:内边距)
盒子水平排列(水平排列中间的margin是互相独立的)
盒子垂直排列(垂直排列中间的margin是重合的1)

2.盒子样式

border样式
- border:粗细颜色线条类型(顺序可以改变)
- border-top:粗细颜色线条类型
- border-bottom:粗细颜色线条类型
- border-left:粗细颜色线条类型
- border-right:粗细颜色线条类型
margin样式
- margin: 上左下右 (以像素为单位)
- margin-top:10px
- margin-left:10px
- margin-bottom:10px
- margin-right:10px
padding样式
- padding:上左下右 (以像素为单位)
- padding-top:10px
- padding-bottom:10px
- padding-left:10px
- padding-right:10px''
width样式(宽度):(以像素为单位)
height样式(高度):(以像素为单位)
居中设置
- tips：设置居中时，除了左右外边距需要设置为"auto"，同时还要设置宽度

3.文本样式

font : 字体，颜色，大小，粗细，对齐，装饰
- font-family :"微软雅黑"(引号可以省略)
- font-size : 12px
- font-weight : bold （加粗）
- text-align : left/center/right (横向对齐方式)
- line-height : 数值(一般用像素或者所在元素高度的与字体大小的比值)
- text-decoration : none/underline/overline/line-through (装饰)

4.背景样式

background : 背景颜色背景图片图片坐标背景尺寸图片重复方式
- background-color : #ffffff|rgb(255,255,255)|white
- background-image : url(图片地址)
- background-position : x%y%|x pos y pos|top center（图片位置）
  - background-position - CSS（层叠样式表） | MDN (mozilla.org)
- background-size ：length(长度)|percentage(百分比)|cover(覆盖率，保持纵横比)|contain(图片不超出标签范围的情况下变成最大，且保持纵横比)
- background-repeat : repeat|repeat-x|repeat-y|np-repeat（重复方式）
  - background-repeat - CSS（层叠样式表） | MDN (mozilla.org)

5.图片样式

vertical-align : top | middle | bottom
- 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片 <img>
- 垂直对齐表格单元内容
此处的对齐方式并非图片相对于父元素的对齐，而是其他元素相对于图片的对齐方式。只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。

6.布局样式

文档流
- 要说到布局，有一个永远都无法避开的话题叫做"文档流"
- "文档流"指的是文档的排列方式：在同一个平面中从左往右，从上到下排列
- "脱离文档流"简单理解为盒子脱离原有的文档排列方式，从同一个平面扶起来，根据一定的要求排列
浮动 float
- float ：left | right
- 单个div的浮动效果
- 多个div一起浮动的效果
- 取消浮动的方法
定位
- position ： absolute | fixed | relative | static | sticky
- position - CSS（层叠样式表） | MDN (mozilla.org)
  
  （absolute和fixed都是绝对定位，absolute是相对于static定位以外的第一个父元素进行定位；fixed是相对于浏览器窗口进行定位；relative是相对定位的元素，相对于其他正常位置进行定位；static是默认值，没有定位；inherit规定应该从父元素继承position属性的值，sticky是粘性定位粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。）
  - position需要跟top|bottom|left | right连用
  - top元素距离顶端距离
  - bottom元素距离底部距离
  - left元素距离左端距离
  - righ元素距离右端距离
- 绝对定位absolute是以浏览器作为参考系，但是如果绝对定位的元素在非静态定位(static)的元素中，那么就以这个元素作为参考
盒子层次:z-index属性，数值越高，越在顶层
呈现形式: display : none | block | inline | inline-block
- block : 块级标签，可设置宽，高，元素独占一行
- inline : 行级标签，不可设置宽，高，元素自适应内部内容
- inline-block : 介于block与inline之间，可以设置宽，高，但是不会独占一行
表格线框
- border-collapse : separate | collapse
- border-collapse 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
  - separate ：默认值，边框可能会被分开，不会忽略corder-spacing和empty-cells属性
  - collapse ：如果可能，边框会合并成为一个单一的边框，会疏略border-spacing和empty-cells属性
- border-spacing ：[length]
- - 规定相邻单元的边框之间的距离，使用px，cm等单位，不允许使用负值
  - 如果定义一个length参数，那么定义的是水平和垂直间距
  - 如果定义两个length参数，那么第一个设置水平间距，第二个设置垂直间距