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>

相关推荐
慧一居士5 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead6 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app