前端学习 CSS

CSS语法规范

<head>
<style>
h1{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<h1>标题</h1>
</body>

选择器 {一条或多条声明}

选择器和大括号中间最好加个空格

基础选择器

标签选择器
<style>
p {
color: red;
}
<style>
<p>12</p>
<p>12</p>
<p>12</p>

选择了所有的对应标签

类选择器
.类 {
}
<p class="类">123</p>

长名词或词组可以使用中横线来给选择器命名 -

多类名选择器
<div class="类名 类名"><div>
id选择器
#id {
}
<div id=""></div>

id只能调用一次,调用后别人无法使用

和类一样只能用英文,相比而言id用得少

通配符选择器
* {
}
选择所有的标签

字体属性

字体
font-family: ''

多个字体,如果前面的显示不出来会用后面的替换

文字大小
body {
font-size:16px;
}
h {
font-size:16px;
}
body可选择所有主体,但是标题标签需要特别指定
字体粗细
font-weight:
700或者bold 加粗
文字样式
font-style:
normal 正常
italic 斜体
字体复合属性
格式:font: font-style font-weight font-size/line-height font-family;
font: italic 700 16px 'Microsoft yahei'

顺序不能颠倒

文字大小和字体不能省略

文本属性

颜色
color: pink;
color: #FF0000
color: rgb(255,0,0)或者rgb(100%,0%,0%)
对齐文本
text-align: center
left right center

用来设置水平对齐

装饰文本
text-decoration:
none 默认
underline 下划线
overline 上划线
line-through 删除线
文本缩进
text-indent:
让每个首行缩进
em是一个相对单位,是当前元素的一个文字大小
行间距
line-height:

行间距包括上间距,文本高度,下间距

16px为默认值

样式表

内部样式表
  • 控制整个HTML界面

  • 没有完全分离

行内样式表
  • 修改简单样式
  • 不推荐大量使用
<p style = "color: blue"></p>
外部样式表
  • 在外面写一个CSS,之后引用
  • 最推荐使用
在HTML外部写一个CSS
<head>
<link rel="stylesheet" href="样式表名字.css">
</head>
posted @   旅者与他的雄关漫道  阅读(20)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示