CSS简单入门

一.简单概念

1.概念

层叠样式表,一种样式表语言,用来美化HTML文档的呈现。

2.书写位置

title标签下方添加style双标签,style标签里面书写CSS代码

(1)外部学习样式

<title>CSS使用</title>

<style>

/* 选择器{属性名:属性值} */

/* 属性名和属性值成对出现--键值对 */

p{

/* CSS属性 */

}

</style>

(2)行内写法

<title>CSS使用</title>

<link rel="stylesheet" href="./my.css">

</head>

<body>

<p>的那家店你</p>

<!-- 行内写法 -->

<div style="color: brown;font-size: 100px;">行内写法</div>

</body>

3.标签选择器

选中所有同名标签设置相同的样式

4.类选择器

差异化设置标签的显示结果

先定义-----> .类名

使用-------> class="类名"

<title>CSS使用</title>

<style>

.red{

color: brown;

}

</style>

</head>

<body>

<p class="red">的那家店你</p>

<p>你几点才能发多少</p>

</body>

5.id选择器

一般要配合JavaScrept使用,一般不用于CSS设置

先定义:#id名

使用:id="id名"

6.通配符选择器

查找页面所有标签,设置相同样式

定义:*{}

<style>

*{

color: blue;

}

</style>

</head>

<body>

<p>你几点才能发多少</p>

<ul>

<li>1</li>

<li>4</li>

</ul>

</body>

7.实践:画盒子


知识点:类选择器

8.字体修饰属性

(1)字体大小,粗细,倾斜

网页内可查看相关属性值:

鼠标右键点击检查,打开调试工具,(快捷键为F12),然后点击红色圈出的鼠标标志,移动鼠标光标到字体段落可以查看字体相关信息。

styles那里可以调试

(2)行高

行高垂直居中:行高属性值=盒子高度属性值

p{

height: 100px;

background-color: aqua;

line-height: 100px;

}

(3)字体族

(4)字体复合属性

一定要按顺序写!

(5)文本缩进,对齐和修饰线

缩进:

对齐:(文本及图片居中同理)

文本修饰线:

(6)颜色

9.新闻案例

!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>新闻详细</title>

<style>

h1{

text-align: center;

font-size: 33px;

font-weight: 400;

color: #333;

}

div{

font-size: 14px;

color: #999;

}

p{

text-indent: 2em;

font-size: 18px;

color: #333;

}

.pic{

text-align: center;

}

</style>

</head>

<body>

<h1>您好</h1>

<div>时间2024年10月14日</div>

<p><strong>新闻说:</strong>收到回复不及时,先整体再局部,物权法检测完女角色。强调用strong,sadcfwasdwasddwasd,设定返回南京二手房拿出几十万和队伍建设金额多少v不回家二等奖觉得v那是多久才能十年寒窗封测江苏卫视记得上次乏善可陈你就开始的脑残粉金额几点开始v你的飞机发动机可是那就问你我的</p>

<div class="pic">

<!-- 类选择器差异化 -->

<img src="./2.png" alt="">

</div>

</body>

</html>

相关推荐
vortex54 分钟前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人7 分钟前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust
maxine10 分钟前
JS Entry和 HTML Entry
前端
用户633107761236612 分钟前
Who is a Promise?
前端
比老马还六1 小时前
Blockly元组积木开发
前端
笨笨狗吞噬者1 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
西洼工作室1 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
xier1234561 小时前
高性能和高灵活度的react表格组件
前端
你打不到我呢1 小时前
nestjs入门:上手数据库与prisma
前端
多啦C梦a1 小时前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js