前端入门（一）初步了解css

最新推荐文章于 2024-07-11 15:29:37 发布

走着走着就走神了

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量225

点赞数 1

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

本文链接：https://blog.csdn.net/a_wh_white/article/details/125573869

版权

html 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

CSS

简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现[HTML]（[标准通用标记语言]的一个应用）或[XML]（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

在html中引入css的三种方式

外部样式表(External style sheet)

<head> 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head>

内部样式表(Internal style sheet) 在head标签内style标签内书写

<head>
      <style> 
          hr {
              color:sienna;
          } 
          p {
              margin-left:20px;
          } 
          body {
              
          } 
      </style>
</head>

行内(内联)样式(Inline style) 标签内使用style属性设置

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

样式生效原则

1.同等权重时，后写的样式生效

2.不同权重时，权重高的生效

3.行内(内联)样式权重大于内部样式和外部样式

盒模型

在这里插入图片描述

css 基本标签属性

background: yellow;背景颜色

height: 50px; 高度

width: 100px;宽度

padding: 30px;填充

border: 10px solid green; 边框: 宽度类型颜色

margin: 50px; 外边距左右外边距累加，上下外边距重合

float:left,right; 浮动属性: 会使标签脱离文档流

position 定位属性和属性值

语法

position:static/absolute/relative/fixed/sticky/unset/inherit(未设置是inherit和initial的结合)/initial(最初的，初始的);

static：默认值，无特殊定位，对象遵循HTML原则

relative ：相对定位遵循正常的文档流，将依据right，top，left，bottom（相对定位）等属性在正常文档流中相对自身位置进行偏移；其层叠通过z-index属性定义.

absolute：绝对定位，将对象从文档流中完全拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据浏览器进行定位，而其层叠通过z-index属性定义

fixed：(固定定位)，类似于绝对定位的方式，但是它的参照物是浏览器的“可视”窗口，且脱离标准文档流

sticky：(粘性定位) 相对离自己最近且有滚动条的父元素做的定位，该定位是相对定位和固定定位的结合，在跨越特定阈值前类似相对定位，之后类似固定定位。

绝对和相对定位的区别

1、参照物不同，绝对定位（absolute）的参照物是包含块（父级），相对定位的参照物是元素本身位置；

2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

定位元素的层级属性

z-index : auto |number;

设置定位对象的层叠顺序。

auto：默认值。遵循结构，后写的定位元素层的顺序靠上。

number:无单位的整数值。可为负数，数值越大，层的顺序越靠上

说明：此属性仅仅作用于 position 属性值 relative 或 absolute,fixed,sticky的对象。

包含块的概念及作用

包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；

默认状态下，浏览器是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。

透明写法

IE9以下浏览器写法：filter:alpha(opacity=value);取值范围 0-100之间的整数值

兼容其他浏览器写法：opacity:0.5; (value的取值范围0-1|0.1,0.2,0.3-----0.9—1)

rgba(255,255,0,0.5)(最后一位值表示透明，取值范围0-1) 只支持IE8以上的浏览器

标签居中的方式：

左右居中： margin: auto

上下左右全居中：用定位

方法1：

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;

方法2：

position: absolute;
left: calc(50% - 自身宽度一半);
top: calc(50% - 自身高度一半);

calc()中运算符号前后必须加空格

走着走着就走神了

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端入门（一）初步了解css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现[HTML]（[标准通用标记语言]的一个应用）或[XML]（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化内部样式表(Internal style sheet) 在head标签内style标签内书写行内(内联)样式(Inline style) 标签内使用style属性设置样式生效原则 1.同等权重时，后写的样式生
复制链接

扫一扫