为满足网页的需要,来进行前端代码的学习
CSS基础
一:style
<style>
css标签
</styte>
例:对p标签进行更改
<style>
p{
color:red;
/*像素*/
font-size: 30px;
/*背景*/
background: aqua;
/*宽度*/
width: 400px;
}
</style>
二:引入方式
引入文件:
<link rel="stylesheet" href="./CSS/c.css">
行内式:
<div style="color: cyan"; font="10px"; >
CSS引入方式2,行内式
</div>
以及一的方式
三:选择器
类选择器:
.red{
color: red;
}
.size
{
font-size: 20px;
}
id选择器
#two
{
color: aqua;
}
通配符选择器:对说有标签进行定义
*{
color: chartreuse;
}
注:对于同一个标签的同一属性,后面会对前进行覆盖
四:文字样式
大小:
font-size: 20px;
粗细:
font-weight: 700;
倾斜:
font-style: italic;
字体:
font-family: 楷体;
文本对齐方式:
text-align: center;
下划线:
text-decoration: underline;
删除线:
text-decoration: line-through;
上划线:
text-decoration: overline;
无装饰(超链接);
text-decoration: none;
五:段落
p{
/*标签水平居中*/
/*margin: 0 auto;*/
/*设置*/
line-height: 50px;
/*倍数*/
line-height: 1.5;
/*大小*/
font-size: 20px;
/*缩进*/
text-indent: 2em;
}
六:div
很强大的标签,这里就介绍居中
div{
margin: 0 auto;
}
七:body
对于文字,图片的居中,要对他的父类进行修改
八:子类,并集,交集
div>a{
color: red;
}
div p a{
color: #87ceee;
}
p,div,span,h1
{
color: red;
}
p.box
{
color: red;
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话