JIANGzihao0222

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
统计
 

为满足网页的需要,来进行前端代码的学习

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;
}


 





posted on   实名吓我一跳  阅读(13)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
 
点击右上角即可分享
微信分享提示