CSS入门

已于 2023-08-23 12:21:10 修改
阅读量175 收藏
点赞数 1
分类专栏： CSS CSS入门 前端入门 文章标签： css 前端
于 2023-08-23 12:20:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aschier/article/details/132449594
版权
CSS 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
CSS入门
1 篇文章 0 订阅
订阅专栏
前端入门
1 篇文章 0 订阅
订阅专栏

CSS在html中的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
       #此处为CSS内容

    </style>
</head>
<body>

</body>
</html>

选择器

#id //id选择器
.class //类选择器

伪类选择器

当鼠标对其修饰的标签进行操作后后，会相应地改变其颜色

<style>
    /*初始状态*/
  id:link{
    color:yellow;
  }  
  /*访问之后*/
  id:visited{
    ……
  }
  /*鼠标移上去后*/
  id:hover{
    ...
  }
  /*点击激活*/
  id:active{
    ...
  }
</style>

顺序不可以改变

选择器权重

id>class>元素

文本属性

字体本身属性

font-size:16px //文本字体大小，默认16px
font-family //字体

image.png
字体可以同时设置多个

font-family: 楷书,宋体,仿宋;

如果第一个不支持，就会显示第二个，如果第二个不支持，就会显示默认字体微软雅黑

文本装饰

颜色
color //字体颜色

//通过英文单词设置
.test{
  color:red;
}

//通过rgb值来设置
.text2{
  color:rgb(0,255,255);
}

//十六进制写法
//正常人不会用
.text3{
  color:#ffffff//白色
  //每两位未一组 ff ff ff
}

//或者直接通过VScode工具直接量取颜色

粗细
font-wright:100; //加粗 取值为100-900
//100 细体 ，400正常， 700加粗， 900更粗体

font-weight:lighter; //细
font-weight:normal; //普通
font-weight:bold; //粗体
font-weight:bolder; //更粗

倾斜
font-style:italic; //斜体字
font-style:oblique; //倾斜的文字，强调作用
font-style:notmal; //常规显示

文本位置

text-align//用来指示文本位置

text-align:center//中间显示
text-align:right//右边
text-align:left//左边
text-align:justify//两端对齐，最大限度地利用文本空间(多行文本使用)

<div>
	weight: 500px;
	height: 100px;
	line-height:100px;//将其设置为与垂直方向大小一直
  text-align:center;
</div>

文本间距

letter-spacing:10px #字间距 h e l l o  w o r l d
word-spacing:10px#词间距 hello   world
#以上两个值默认是0px

首行缩进

text-indent:32px #默认字体大小下，正好空出两个汉字
text-indent:2em #字体两倍大小的空格

文本修饰

text-decoration: underline //下划线
text-decoration: line-through //删除线
text-decoration: overline //上划线
text-decoration: none //空白修饰

注意：四个属性无法分行声明多个，最后一行总是会覆盖前面的修饰
若要一次性设置多个属性，如下

text-decoration: line-through underline overline;

检索大小写

注意： 更适合英文

text-transform: capitalize #首字母全部大写
text-transform: lowercase #全部小写
text-uppercase: uppercase #全部大写

复合写法

font:intalic bold 20px/1em 宋体

顺序：修饰 字号/行高 字体
image.png

列表属性

列表修饰

list-style-type: disc #实心圆
list-style-type: circle #空心圆
list-style-type: square 实心正方形
list-style-type: none #不使用自带图形内容

list-style-image: url(path/number.jpg)
#一般通过id选择器逐个设置

自定义列表效果如下：
image.png

列表边框

boder: 1px solid red;
list-style-position: outside;

image.png

boder: 1px solid red;
list-style-position: inside;

image.png

复合选择

list-style: none url(img/1.jpg) inside;

三者的位置可以随意互换

背景属性

纯色背景

background-color: red;
#还可以通过十六进制，rgb等方法设置，先前已经有案例了

background-color: rgba(0,0,0,0.5); #0~1 逐渐不透明

图片背景

图片属性

图片默认是平铺效果

weight:100px;
height:100px;
background-image: url(path.jpg);#默认是图片平铺效果
#平铺：如果图片没有div标签的空间大，则会复制出多份显示
#如果图片太大，则会裁剪后显示

#方法见下

background-repeat: repeat;#默认值
background-repeat: repeat-x;#横向平铺
background-repeat: repeat-y;纵向平铺
background-repeat: no-repeat;#不平铺

background-position: 30px 30px ;#笛卡尔坐标系第四象限中坐标的绝对值
background-position: 10% 10&;#取整块区域的百分数
background-position: center center;#通过英文单词来设置

图片大小
background-size: 400px 400px

如果图片和背景区域一样大，则会出现如下情况
image.png图片变形，强行被放大

background-size: 100% 100%

此处的百分比为图片所占背景区域的比例
如果背景框与图片比例不协调或背景区域太大，则图片仍然会出现如上的变形失真

background-size: cover

将图片扩展至足够大，使其能够完全覆盖背景区域，如下
image.png但是可能导致一部分无法显示在背景区域中

background-size:contain

把图片扩大到最大尺寸，使其宽度和高度完全适应内容区
可能铺不满背景区域，有留白，如下
image.png

背景的固定和滚动

当背景区域太长时，会出现如下情况
image.png
可见，其右边出现了滑动条
但是在滑动该条时，图片仍然会保持在原来的位置，不会随着屏幕的移动而移动，使得容易消失在视野中

background-attachment: scroll; #默认状态，图片位置固定

background-attachment: fixed;

此时图片会保持在屏幕的那个位置，无论怎么滑动，始终在用户的视野中

复合写法
background:yellow url(...) no-repeat center fixed

以上属性的顺序可以调换（除center top 这样的位置属性外，两个值要紧挨着）
如果一次性没有设置完，前面有分开设置的属性，那么会默认那一部分未设置完的属性为没有设置，覆盖那些分开设置的属性
注意：background-size 不能复合设置，要单独使用

浮动属性

普通浮动

浮动属性的意义就在于让本身独占一行的div标签能够与相互平起平坐
设置浮动属性前
image.png
现在，对红色div添加如下属性

float: left

使用此代码后，红色的div相当于漂浮起来了(从3维层面上讲)，绿色div就空位补齐到了红色的下方，呈如下情况
image.png
为了更清晰，现在将绿色放大
image.png
注意：如果设置文字，文字不会被挡住，会见缝插针地显示

但如果给以上三个div全都设置成float:left属性，则会出现一下情况
image.png
如果n多个标签全都设置成了浮动，一行排不满，则会排到第二行，如下
image.png
如果将红色设置成右浮动，即

float:right;

则会发生如下情况
image.png
越先设置浮动的就越先排列
image.png

清浮动

清浮动的含义是 “清理某一元素对周围元素的浮动影响”，即设置清浮动的那个元素不会影响它周围未浮动的元素
image.png

活着用后面要学的bfc，让浮动元素计算高度

overflow:hidden

该代码相当于 clear:both;

盒子模型

image.png

内边距

padding: 30px;

image.png四面都空出一段距离

但如果想要将上下与左右的内边距设置成不一样的值，需要两个参数

padding: 30px 40px; #30px是上下 40px是左右

或三个参数

padding:10px 20px 30px; # 上 左右 下

最多能够设置四个参数

padding:10px 20px 30px 40px; 上 右 下 左

也可以指定方向设置

padding-left:
padding-right:
padding-bottom:
padding-top

注意：padding值不得设置为负数

边框

基础
border: 10px solid red; #大小 样式 颜色

solid 实线
image.png
double 双线
image.png
dashed 虚线
image.png
dotted 点虚线
image.png
注意：盒子内部模型会蔓延到边框上（特别是当边框为虚线时）

边框也可以指定特定方向设置

border-left: 2px solid red;
border-right
border-top
border-bottom

可以将这几个属性分开设置

border-weith:10px;
border-color:red;
border-style: solid;

同时这三个属性可以一次性设置四个方向

border-width:10px 20px 30px 40px
border-color:yellow blue black red
border-style:solid double dashed dotted

遵循顺序： 上 右 下 左

外边距

属性
margin: 50px

以上代码意味着这个盒子的四个方向都与其他盒子相隔50个像素

margin:50px 60px 20px

margin:50px 40px 30px 20px

也可以单独设置属性的方向

margin-top:10px
...

注：
1.背景色不会蔓延到外边距
2.margin支持负值
image.png
此时盒子会往反方向移动

在屏幕水平居中
margin:0 auto; #上下为0，左右自动

注意：在垂直方向上无法用此方法居中

外边距特性

外边距的合并

垂直方向，外边距取最大值
若同时写了两个盒子，一个设置了下外边距，在上面；一个设置了上外边距，在上一个盒子的下方。那么此时会将中间相交部分的外边距取最大值显示。

水平方向，两个盒子的外边距会一起显示
若此时存在水平两个盒子，左边的盒子向右的外边距为20px；右边的盒子向左的外边距为10px；那么总共的边距为30px，并显示。

父子间的边距兼容

如果两个盒子具有父子关系，子盒子所加的外边距属性会被父盒子吞并，并且作为父盒子的属性显示，如下
image.png

可以通过对父盒子设置内边距来实现想要达到的效果

padding-top: 100px;

image.png

或者通过给父盒子设置边框的方法：

border:1px solid transparent; #透明边框

也可以让子盒子或父盒子浮动起来解决：

float: left;

也能用后面要学的BFC

overflow:hidden

溢出属性

overflow: visiable; #默认属性，过多的文本会被挤出
overflow: hidden; #溢出隐藏，文本会被裁切
overflow: scroll; #会创建一个滚动条（无论文本是否溢出）
overflow: auto; #自动适配，文本过大则会自动创建滚动条
overflow: inherit; #继承父元素的效果

overflow-x:
overflow-y:

white-space:normal;#默认

image.png

溢出属性的应用
image.png

white-space:nowrap;
overflow:hidden;
text-overflow: sllipsis;

image.png
文本中溢出部分会出现小点

元素

image.png注意：千万不能在

标签里嵌套任何块级元素，否则块级元素会自动跳出来

可以通过元素互相转换的方法来让一个标签同时具有块元素与行内元素特征

diaplay:inline;#让块元素强行变成行内元素
display:inline-block;#将行内元素转换变成块元素

定位

image.png

层级

z-index:10;

z-index越大，标签越靠上显示

在盒子中水平居中

子盒子绝对定位，父盒子相对定位（子绝父相）

.father{
	width: 500px;
	height: 500px;
	background:yellow;
	margin:0 auto;
	position: relative;
}
.son{
	width: 200px;
  height: 200px;
  background:red;
  position:avsolute;
  top:50%;
  left:50%
	margin-top:-100px;
	margin-left:-100px;
}

浮动与定位的区别

浮动会挤压文字
image.png
定位会覆盖文字
image.png

锚点

image.png

精灵图

background-position: x y;
注意：x与y使用负值

定位一张综合图中的元素显示
从图片的左上角定位

宽高自适应

/*宽度自适应:与浏览器宽度保持一致*/
weight:auto; 或 不设置宽度


/*高度自适应：*/
默认：根据所填充的文本内容自动扩张

//最小高度:保持最小100px的高度，超过则撑开
min-height:100px
//最大高度：保持最大100px的高度，超过则不显示
max-height:100px
//以此类推，还有最小宽度和最大宽度

伪元素

div::first-lerrer{
	background:blue;
}
#id::first-line{
 ......
}
.class::before{
	content:"aaa"; //非元素，无法在网页中被选中
}
div::after{

}

隐藏

display:none;//不占位隐藏
display:hidden；//占位隐藏

窗口自适应

html,body{
	height: 100%
}

这样设置之后便可以进行以下对其它标签的设置，使之直接占满一整个窗口

.class{
	height:100%；//这种属性在未经以上设置时是无效的
}

两栏布局

image.png这种左侧栏宽度不变，右侧栏宽度自适应的，即为两栏布局。
通常用于后台管理系统。

width: calc(100% - 200px);
//calc可以帮助完成数学计算
//200px 为左侧div宽度

html交互功能

选项框

单选框
<div>
	<input type="radio" name="aaa">选项内容1
	<input type="radio" name="aaa">选项内容2
</div>

如果不加 name 属性，则不能做到单选的效果

以上方法仅可以点击选项框来选中，点击文字没有反应
如果想要点击文字也有反应，则要改为如下代码

<div>
	<input type="radio" name="aaa" id="1">
	<label for="1">选项内容1</label>
	<input type="radio" name="aaa" id="2">
	<label for="1">选项内容2</label>
</div>

如果要在一开始就默认选中某一个选项，则做以下修改

<div>
	<input type="radio" name="aaa" id="1" checked="checked">//有该属性的则为默认选中的选项
	<label for="1">选项内容1</label>
	<input type="radio" name="aaa" id="2">
	<label for="1">选项内容2</label>
</div>

可以缩写成这样

<input type="radio" name="aaa" id="1" checked>

复选框
<input type="checkbox" name="aaa" id="1" checked>
	<label for="1">选项内容1</label>
<input type="checkbox" name="aaa" id="2">
	<label for="2">选项内容2</label>
<input type="checkbox" name="aaa" id="3" checked>
	<label for="3">选项内容2</label>

除了type中的属性为checkbox以外，其它都具有和单选框一样的效果，但其可以同时预框选多个选项。

上传文件

<input type="file" name="" id="">

<input type="image">
//用来替代提交按钮

<input type="hidden" name="" id="" value="带给后端的信息">

<button disabled="disabled">
  <input type="radio" disabled>
  <input type="text" readonly>//只读

下拉菜单

<select size="4"> //size表示所显示的选项数量
  <option>a</option>//选项
  <option>b</option>
  <option>c</option>
  <option>d</option>
</select>

<select size="4" multiple> //multiple 表示按住ctrl+shift可以多选
  <option value="a">a</option> //value值为传回后端的内容
  <option selected>b</option> //selected表示默认选择
  <option>c</option>
  <option>d</option>
</select>

文本域

即一个大型的，可以输入多行文本的文本输入框
image.png

<textarea clos="10", rows="20"></textarea> 
//textarea输入和显示的列数，rows为行数，由于灵活性太差，不使用，一般使用CSS来调节

textarea{
  width: 300px;
  height: 300px;
}

<textarea placeholder="预置文本内容"></textarea> //提示作用
<textarea value="预置内容"></textarea> //设置默认内容，直接自动填写在文本域里面 

textarea{
	resize: vertical; //水平方向上限制，只允许竖直方向改变大小
  resize: horizontal; //限制竖直方向
	resize: none; //大小永远无法改变
}

注意：写文本域标签的时候如果设置了默认内容，不能随便换行与在标签中添加内容

字段集

<fieldset> //字段集
	<legend>性别</legend>> //字段集的缺口
    <input type="radio" name="sex">男</input>
    <br>
    <input type="radio" name="sex">女</input>
</fieldset>>

image.png可以用CSS修饰

fieldset{
  border:200px solid blue;
  wigth:500px;
  height:500px;
}
legend{
  border:1px dolid red;
  text-align: center;
}

image.png

html5

语义化标签

image.png
image.png

<header>标题</header>
<section>内容</section>
<footer>脚注</footer>

语义化标签无实际效果，其目的是为了方便搜索引擎的爬虫，可以用来代替div标签用

音频标签

<audio src="" controls></audio>

src可以为一个相对相对地址或是超链接
controls意思是出现音频控制栏
还有一个loop属性，可以用来循环播放
autoplay为自动播放(注意：谷歌浏览器会为了用户体验，会在用户非主动的情况下禁止掉自动播放)
muted可以使音频一开始就处于静音状态

视屏标签

<video src="" poster=""></video>

poster可以在播放按钮点击前在视屏位置投放一个海报（封面图片）
可以通过weith和hight调整其大小，但视屏会被等比例缩放
其余各种属性与其效果与音频标签的属性一样
注意：如果同时添加了autoplay与muted属性，谷歌浏览器会自动播放

增强表单input

颜色选择器
<from>
<input type="color" name="color"></input>
</from>

image.png

增强型文本框
<input type="email"></input>

<input type="url"></input>

type="tel"

type= "number" min="0" max="10" value="5" step="2"

type="search"

输入限制属性
<input type="email" autofocus></input>
只能聚焦一个，后面若多写了会聚焦遇见的第一个

<input type="email" required></input>
可以同时修饰多个，每次提交如果有一个被修饰的输入框为空则不能提交

<input type="email" multiple></input>
在输入时用逗号隔开则同时返还给后端多个邮箱

<input type="email" pattern="[0-9][A-Z]{3}"></input>
pattern的""中填写正则表达式

滑动效果
<input type="range"></input>

image.png
默认为0~100
可以设置范围

<input type="range" min="100" max="200"></input>

每次滑动增加1
可以改滑动增加的数字

<input type="range" min="100" max="200" step="10"></input>

可以设置默认值

<input type="range" min="100" max="200" step="10" value="150"></input>

日期选择
type="date" 日期选择
type="mouth"月份选择
type"week"周数选择
type="datetime-local"精确到时间

下拉文本

<input type="text" list="alist">
<datalist id="alist">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
</datalist>

image.png

愚人猫Idiomeo
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS入门学习笔记+案例
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS入门 超详细
weixin_55816781的博客
04-12 7185
CSS 一基础认知 1.1：css的介绍 css：层叠样式表 css作用：给页面中的HTML标签设置样式 1.2css语法规则 写在哪里 css写在style标签中，style标签一般写在head标签里面，title标签下面 样式： 选择器{ 属性名:属性值; } 1.3css初体验 常见属性： color：文字颜色 font-size:字体大小 background-color:背景颜色 width:宽度 height：高度 <!DOCTYPE html> <html lang="e
TailWindCSS入门
cccdf_jjj的博客
06-15 6152
上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。好啦话不多说，开始吧！1.screens(也可以自定义媒体查询屏幕的宽度) 2.颜色 一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，green： 3.纵横比--aspect 4.容器--container 6.列--co.
css入门学习
山有木兮
06-25 3686
学过前端的人，对HTML语言一定不会感到陌生，因为它是前端设计最基本的工具。然而，随着网站越来越复杂，网站的维护变得越来越重要，对设计师的要求也越来越高。
头歌-CSS入门
somewon的博客
03-06 7846
四川师范大学 CSS 头歌
CSS入门教程
打代码是一天，不打代码也是一天
04-04 2947
CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式CSS写在一个单独的文件中，通过link标签在网页中引入 2.2.2 内部样式 CSS写在网页的head标签中，用style标签包裹 2.2.3 行内样式 CSS写在标签的style属性中 三种CSS样式引入方式的区别选择器，就是选取（查找）需要设置样式元素的方式 2.3.1 元素选择器 通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式 小结：1、无论嵌套多少层，只要元素名称相同都会被找到通过类
CSS入门使用
zz14664656的博客
12-15 1039
引入CSS的三种方式其优先级：行内样式 > 内部样式 > 外部样式。
Tailwind CSS快速入门
知识点沉淀包括不限于前端
05-24 1369
Tailwind css 对比传统css css in js 安装流程 书写技巧 速查手册
CSS入门基础详解——笔记、案例
qq_46362763的博客
04-01 1491
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护.........
CSS入门PPT
01-19
CSS入门，适合初学者，基础的CSS操作 CSS(Cascading Style Sheet)级联样式单（层叠样式表） HTML5建议把页面外观交给CSS控制。 优点： 表达效果丰富 （元素样式、精确定位） 文档体积小（重复定义 提高传输速度 ...
CSS入门教程篇
10-30
### CSS入门教程篇 #### 一、CSS简介与基本语法规范 **CSS**（Cascading Style Sheets）即层叠样式表，它是一种用于增强HTML文档样式的语言，主要用于控制网页内容的外观呈现，如颜色、布局等。CSS使得内容与表现...
css 入门基础教程
09-25
总的来说，CSS入门基础教程涵盖了基本语法、选择器、注释和不同类型的样式表，这些都是学习CSS的基础。掌握这些知识后，可以进一步学习更复杂的布局技巧、响应式设计、动画和过渡效果，以及CSS预处理器等进阶主题。
css入门入门入门入门
05-23
01_CSS快速入门.mp4可能涵盖了CSS的基础知识，包括选择器的使用、盒模型、浮动和定位，这些都是CSS初学者需要掌握的基础技能。盒模型定义了元素的尺寸，包括内容、内边距、边框和外边距。浮动和定位则是布局中的重要...
CSS入门讲解
10-11
WEB项目第二天，HTML和CSS入门讲解，内容还是比较详细的
CSS技巧专栏：一日一例 19 -纯CSS实现超酷的水晶按钮特效
最新发布
uu0216的博客
08-06 657
我们观察一下按钮动作，鼠标移动到按钮上时，发生了两个变化： 1.按钮本体向下滑动了几个像素。但按钮的高光没有动。 2.按钮下面的深色投影，在按钮向下移动的时候，阴影没有了。我们可以把按钮本体那个投影层的透明度降低看看效果：
前端面试宝典【CSS篇】【5】
BDawn的专栏
08-06 51
CSS 选择器的优先级（也称为“特异性”或“specificity”）是指当多个 CSS 规则应用于同一个 HTML 元素时，哪个规则会被应用。CSS 的优先级机制确保了样式规则能够按照预期的方式生效。 在 CSS 中，一些属性是可以被子元素继承的，这意味着子元素会自动采用父元素的这些属性值。
CSS基础
qq_73792226的博客
08-06 437
【代码】CSS基础。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 137
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
CSS入门与优势解析
下面是一个简单的CSS入门示例： ```html <!DOCTYPE html> 第一个css程序 <!-- 在部分内使用标签来写CSS --> <link rel="stylesheet" href="css/style.css"> 我是一级标题 ``` 在这个例子中，`<style>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值