css基础知识

最新推荐文章于 2024-10-11 16:10:25 发布
最新推荐文章于 2024-10-11 16:10:25 发布
阅读量64 收藏 1
点赞数 1
文章标签： html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62979792/article/details/121674757
版权
CSS 是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
css四种引入方式：行内，内嵌，外链，导入样式
行内样式：是在标签里面加上style属性
<!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "UTF-8" >
<title> css 样式 </title>
</head>
<body>
<h2 style = "color:red;text-align:center" > 这是一个标题 </h2>
</body>
</html>
内嵌样式 ：样式写在style 标签里面（ style 标签在 head 标签内）
!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "UTF-8" >
<title> css 样式 </title>
<style type = "text/css" >
h2 {
color : blue ;
text-align : center ;
}
</style>
</head>
<body>
<h2> 这是一个标题 </h2>
</body>
</html>
外链样式
<!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "UTF-8" >
<title> css 样式 </title>
<link rel = "stylesheet" type = "text/css" href = "1.css" >
</head>
<body>
<h2> 这是一个标题 </h2>
</body>
</html>
导入样式
<!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "UTF-8" >
<title> css 样式 </title>
<style type = "text/css" >
@import url ( "1.css" );
</style>
</head>
<body>
<h2> 这是一个标题 </h2>
</body>
</html>
(四种引入方式的优先级就近原则，修饰的样式距离标签越近优先级越高)
基本选择器 : 标签选择器   ID选择器  类选择器  通用选择器（通配符选择器）
id > 类 > 标签 > 通配符(优先级)
/* 注释 标签选择器 */
h2 {
color : red ;
}
/*id 选择器 */
#one {
color : blue ;
}
/* 类选择器 */
.two {
color : green ;
}
/* 通配符选择器 */
* 包含选择器
1 子代选择器 ------ 获取的某个标签的第一级子标签
2 后代选择器 ----- 获取某个标签内的所有子标签
3 分组选择器
<head>
<meta charset = "UTF-8" >
<title> 选择器优先级 </title>
<style type = "text/css" >
/* 子代选择器 */
/* .list>ul{
color: green;
}*/
/* 后代选择器 */
/* .list li{
color: red;
}*/
/* 分组选择器 */
h2 , .list , #list {
color : blue ;
}
</style>
</head> s
<body>
<h2> 这是一个标签 </h2>
<p id = "list" > 这是一个段落 </p>
<div class = "list" >
<ul>
<li> 这是列表 1 </li>
<li> 这是列表 2 </li>
<li> 这是列表 3 </li>
<li> 这是列表 4 </li>
<li> 这是列表 5 </li>
</ul>
<li> 这是列表 6 </li>
<li> 这是列表 7 </li>
<li> 这是列表 8 </li>
<li> 这是列表 9 </li>
</div>
</body>
</html>
CSS常见样式
Css样式的基本语法：
选择器 {
属性：属性值；
}
设置字号 ------ font-size。设置字体 ------- font-family。设置行高 ------ line-height
设置颜色 ------ color。设置字体的粗细 ------- font-weight。
控制文本
设置文本的缩进 ------text-indent ： 2em ( 可以取负值 )
文本对齐方式 ------ text-align : left center right
对象中的空白处理 -------white-space:normal pre nowrap
文本大小写的控制 -------text-transform:none ( 按照原文本大小写显示 )capitalize( 每个单词首字母
大写 )uppercase( 将小写转换大写 )lowercase( 将大写转换为小写 )
盒子布局
border:

元素分类

块级元素： 独占一行，可以设置宽和高 （div p hn ）
内联元素： 不会自动换行，设置宽和高的时候是不起作用的 （span a）
块级元素和内联元素可以进行相互转换 （display）
css隐藏元素的方式：
display:none;
width:0 height:0
浮动布局：

定位布局 ： overflow（属性）：

display:flex; --------- 弹性盒子 

主要的属性：
flex-direction: 弹性盒子中子元素的排列方式
flex-wrap: 设置子元素超过父元素后是否自动换行
flex-flow:flex-direction 和 flex-wrap 的简写
align-items ：设置弹性盒子在侧轴（纵轴）上的对齐方式
align-content: 对 flex-wrap 的一个修改，和 align-items 相似，但不是设置对齐方式
justify-content: 设置弹性盒子在横轴（主轴）上的对齐方式
flex-direction

flex-wrap  align-items 

align-content justify-content

2D转换

translate() 方法从其当前位置移动元素

rotate() 方法根据给定的角度顺时针或逆时针旋转元素

scale() 方法增加或减少元素的大小

scaleX() 方法增加或减少元素的宽度
scaleY() 方法增加或减少元素的高度
skew() 方法使元素沿 X 和 Y 轴倾斜给定角度
skewX() 方法使元素沿 X 轴倾斜给定角度
skewY() 方法使元素沿 Y 轴倾斜给定角度
matrix() 方法把所有 2D 变换方法组合为一个。
matrix() 方法可接受六个参数可以旋转、缩放、移动（平移） 和倾斜元素

3D转换

rotateX() 方法使元素绕其 X 轴旋转给定角度

rotateY() 方法使元素绕其 Y 轴旋转给定角度
rotateZ() 方法使元素绕其 Z 轴旋转给定角度

 

 

 

 

 

 

 

m0_62979792
关注
CSS基础知识
07-22
资源名称：CSS基础知识内容简介：0、基础知识1、CSS概述2、CSS基础语法3、CSS选择器4、CSS主要属性5、CSS核心机制-盒子模型6、CSS重点和难点-定位7、综合示例浏览器模式 当浏览器厂商开始创建于标准兼容的浏览器时...
CSS基础知识超全整理
07-04
整理好的一份关于css的知识大纲，希望能够帮助到大家，可以用来复习回顾
XHTML CSS基础知识
01-06
【XHTML CSS基础知识】是网页设计中的核心概念，它们构成了网页的基本结构和表现方式。XHTML，即Extensible Hypertext Markup Language，是HTML的一个增强版本，遵循XML的语法规则，更加严谨和标准。CSS，Cascading ...
css基础知识 code
02-22
这个“css基础知识 code”主题涵盖了CSS的基本概念、语法和常见应用，旨在帮助初学者理解并掌握CSS的核心知识。下面我们将深入探讨这些知识点。 首先，CSS是用来分离HTML或XML（包括如SVG、MathML等各种XML方言）...
前端开发笔记--html 黑马程序员2
m0_73805171的博客
10-08 477
路径分为绝对路径和相对路径。
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1393
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
html 之 relative 和 absolute
u010194271的博客
10-09 406
结合 relative 和 absolute 的工作原理当一个父元素使用 relative 定位，并且其子元素或伪元素使用 absolute 定位时，子元素会根据父元素的边界进行定位，而不是根据视口或文档流。这个模式非常常见，用于创建复杂的布局效果。
《常见 HTML 标签和属性全解析》
一名资深Java工程师的技术分享
10-10 1041
在网页开发的世界里，HTML（超文本标记语言）就像是构建数字大厦的基石。它通过各种标签和属性来定义网页的结构、内容和样式。下面，让我们深入了解一些常见的 HTML 标签和属性。
HTML 常用的块级元素和行内元素
u010194271的博客
10-09 595
块级元素行内元素divspanpah1-h6strongul,olli,emtablei,b,ublockquoteimgbrcodenavlabelaside。
前端开发笔记--html 黑马程序员1
m0_73805171的博客
10-08 1426
VsCode在刚下载完成后默认是英文的，这对我们这些中国程序员来说很不友好，为了解决这个问题我们可以选择在VsCode中安装一个这个插件，在安装并重启VsCode后VsCode便会将语言调整为中文。这个插件能够让我们实时看到我们修改后的代码的效果，而不需要在每次修改后都刷新浏览器。这个插件能够帮助我们进行快捷的修改标签在我们修改前一个·标签，后一个标签也会改动。由于篇幅的原因在这里便简单介绍一下一些比较重要的插件，黑马那边有更加全面的插件。这个插件能够让我们选择想要的浏览器进行预览。1.前端开发框架代码。
QD1-P17 HTML 下拉框标签（select、option）
最新发布
qq_38641599的博客
10-11 349
本节学习：HTML 下拉框标签（select、option）
QD1-P7 HTML 容器和布局标签（div、span）
qq_38641599的博客
10-09 684
本节学习：HTML 容器和布局标签（div、span）
HTML 什么是块级元素？
u010194271的博客
10-09 495
当你给 Space 组件加上 block 属性时，它会表现得像块级元素一样，自动填满父容器的宽度。如果没有 block 属性，Space 的宽度只会根据内容调整，不会自动撑满父容器的宽度。这是有助于在某些布局中让元素占满一行或特定的区域，尤其是表单元素或按钮组在垂直排列时使用。
HTML流光爱心
兔子王
09-29 4441
HTML语言实现红蓝色流光爱心效果的完整代码。
HTML DOM 节点
lly202406的博客
10-09 506
HTML DOM节点是HTML文档的基本构建块，包括元素节点、属性节点、文本节点等。通过HTML DOM节点操作，我们可以动态地修改HTML文档的结构和内容。掌握HTML DOM节点及其操作方法对于前端开发至关重要。
QD1-P5 HTML 段落标签（p）换行标签（br）
qq_38641599的博客
10-08 869
本节学习 HTML 段落标签（p）换行标签（br）
HTML组成
GIS前端嘉欣的博客
10-10 169
同时，还需要注意布局元素的使用，例如div、span、section、article、nav等，它们用于将页面内容划分为更加具有语义的区域，并进行样式和布局设置。例如，使用标题标签（h1~h6）描述页面标题，使用段落标签（p）描述段落内容，使用列表标签（ul、ol、li）描述列表等。例如，使用视频标签（video）和音频标签（audio）嵌入视频和音频内容，使用表单标签（form）、标签（input）、下拉框标签（select）等实现数据的输入、提交和验证。（h1）、段落标签（p）和图片标签（img）等。
html中src/href区别
hexadecimal_001的博客
10-05 677
在HTML中，src和href是两个常见的属性，它们用于指定资源的位置，但用途和上下文有所不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值