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 分钟前
文末有奖|高德MCP 2.0 出行领域首发打通大模型与高德地图APP互联
前端
苳烨12 分钟前
UniApp使用最新版Android Studio本地离线打包全流程
前端
Monly2115 分钟前
vue报错:Loading chunk * failed,vue-router懒加载出错问题。
前端·javascript·vue.js
李剑一17 分钟前
别再用HTTP/1这个老古董了,两招帮你升级HTTP/2
前端·架构
t20071824 分钟前
4.27 react第一天
前端·react.js·前端框架
飞天牛牛28 分钟前
前端小知识:彻底搞懂 CSS 的 `position: sticky`!
前端
vim怎么退出39 分钟前
46.二叉树展开为链表
前端·leetcode
薛定谔的猫21 小时前
Composition API的深入理解与最佳实践
前端·vue.js
NaN_3721 小时前
新手教程-使用 Android Studio 搭建 React Native 项目开发环境
前端
天天扭码1 小时前
JavaScript 中 apply 和 call 方法的区别与应用场景
前端·javascript·面试