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>

相关推荐
1024小神几秒前
Cocos游戏开发中,检测两个物体碰撞,并实现物理反弹逻辑
前端·javascript
拾光拾趣录2 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权3 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598244 分钟前
vue3源码解析:调度器
前端·vue.js
Dolphin_海豚26 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件29 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js