CSS入门

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

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

CSS入门学习笔记+案例
itboy
06-16 32万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
HTML+CSS入门
2301_80105894的博客
03-21 1799
HTML+CSS入门
Tailwind Css入门
qq_49108376的博客
12-05 1693
tailwindcss入门必看，清晰易懂
CSS 入门手册(一)
帅次的博客
02-27 1994
把写好的样式放在同级目录的另一个文件夹里，使用时只需要写一个link标签引入在编辑器里即可，他真正意义上做到了结构与样式完全分离。font-size 属性设置文本的大小，字体大小的值可以是绝对或相对的大小。adding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。元素的默认字体大小的是百分比。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
TailwindCss 入门学习
Luo2201657708的博客
10-29 1589
w-[80px]这种写法是Tailwind CSS 自带的功能，无需额外配置，也不需要手动定义 CSS。它属于 Tailwind CSS 的任意值（Arbitrary Value）语法，默认是支持的。因此，你可以直接在项目中使用这种语法，Tailwind 会自动识别和处理。
CSS入门 超详细
weixin_55816781的博客
04-12 8006
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 6617
上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。好啦话不多说，开始吧！1.screens(也可以自定义媒体查询屏幕的宽度) 2.颜色 一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，green： 3.纵横比--aspect 4.容器--container 6.列--co.
PostCSS入门（极速版）
qq_70225657的博客
04-22 542
PostCSS 是一个用 JavaScript 编写的工具，用于转换 CSS 样式的工具。它使用插件系统，使得开发者能够通过各种插件实现各种功能，例如自动添加浏览器前缀、转换 CSS 新特性以及优化 CSS 等。
css入门学习
山有木兮
06-25 4143
学过前端的人，对HTML语言一定不会感到陌生，因为它是前端设计最基本的工具。然而，随着网站越来越复杂，网站的维护变得越来越重要，对设计师的要求也越来越高。
CSS入门源代码 CSS入门源代码
05-20
这个压缩包文件“CSS入门源代码”提供了一些关于CSS基础和进阶知识的学习资源，主要包括以下几个方面： 1. **CSS选择器**：CSS选择器是用于选取HTML或XML文档中的元素的关键工具。基本选择器包括标签选择器（如`<p>...
css入门教程之学习网页布局(1)
12-11
在CSS入门教程中，学习网页布局是至关重要的一步。网页布局指的是通过CSS控制网页中各个元素的显示位置，使得整个页面结构清晰、美观且易于阅读。对于初学者来说，可能会误以为布局是创建网页的第一步，实际上，一个...
css入门入门入门入门
05-23
01_CSS快速入门.mp4可能涵盖了CSS的基础知识，包括选择器的使用、盒模型、浮动和定位，这些都是CSS初学者需要掌握的基础技能。盒模型定义了元素的尺寸，包括内容、内边距、边框和外边距。浮动和定位则是布局中的重要...
CSS学习02 动态列数表格开发，解决多组数据布局与边框重合问题
最新发布
weixin_44185995的博客
04-11 112
在前端开发中，表格常用于展示结构化数据。当数据组的字段数量不统一时（如有的行包含 3 组数据，有的行包含 2 组或 1 组），传统固定列数的表格会出现结构错位、边框重合等问题。本文通过 HTML/CSS 规范方法，实现灵活适应不同数据组数的表格布局，确保视觉一致性和结构完整性。通过 HTML 表格的 colspan（跨列）属性动态调整列数，结合 CSS 的 border-collapse 合并边框，实现灵活且规范的表格布局。
html实现手势密码
weixin_68658847的博客
04-01 1725
html实现手势密码
用HTML和CSS绘制佩奇：我不是佩奇
m0_74488469的博客
04-11 237
这个名为"我不是佩奇"的项目是一个纯CSS绘制的卡通猪形象。整个图形由多个<div>元素组成，每个元素都通过精确的CSS定位和样式来构建猪的各个部分。这个项目展示了CSS在图形创作中的强大能力。通过精心计算的位置、变形和层次控制，仅用CSS就创造出了一个生动的卡通形象。图标设计简单的游戏角色品牌形象展示网页装饰元素虽然这种实现方式在性能上可能不如SVG高效，但它是一个很好的CSS练习，展示了CSS的可能性边界。你可以通过调整各种CSS参数来修改猪的外观，创造属于自己的独特版本，快来试试吧。
CSS 学习01 定位、阴影与伪元素
weixin_44185995的博客
04-11 329
通过这个案例，我们不仅实现了一个美观的按钮组件，更系统练习了 CSS 定位、盒模型、伪元素、过渡效果等核心技能。建议读者亲手敲代码并不断修改参数，观察样式变化规律，这是掌握 CSS 视觉设计的关键方法。
掌握CSS技巧：CSS入门经典2实例源码解析
标题中提到的“CSS入门经典2源代码”指的是一本关于CSS（层叠样式表）学习的参考书的源代码部分。CSS是一种用于网页设计的样式表语言，它负责描述网页的外观和格式。CSS的作用是将内容与展示分离，即让网页的结构...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值