天涯论坛

 找回密码
 立即注册
搜索
查看: 103|回复: 5

CSS样式表

[复制链接]

3139

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968622
发表于 2024-6-30 08:11:23 | 显示全部楼层 |阅读模式

前端学习笔记教程不定时更新中,传送门:

前端HTML第1天:什么是网页?什么是HTML?网页怎么形成?HTML标签大全前端学习:表格学习,附练习+源码前端学习之列表,附送全套源码CSS入门最全笔记

上一期的CSS入门笔记更新完,最后一下知识点在本篇内容。

1、CSS样式表

根据CSS样式书写的位置(引入的方式)CSS样式能够分成三类

1.1 行内样式表(行内式)

行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.

语法:
<div style="color: red; font-size: 12px;">青春不常在抓紧谈爱情</div>

1.style 其实便是标签的属性

在双引号中间,写法要符合 CSS 规范

2.能够掌控当前的标签设置样式

3.因为书写繁琐,并且表现出结构与样式相分离的思想,因此举荐海量运用仅有对当前元素添加简单样式的时候,能够思虑运用

4.运用行内样式表设定 CSS,一般叫作为行内式引入

1.2 内部样式表(嵌入式)

内部样式表(内嵌样式表)是写到html页面内部. 是将所有的 CSS 代码抽取出来,单独放到一个 标签中

语法:
<style> div { color: red; font-size: 12px; } </style>

1. 标签理论上能够放在 HTML 文档的任何地区,但通常会放在文档的标签中

2.经过此种方式,能够方便掌控当前全部页面中的元素样式设置

3.代码结构清晰,然则实现结构与样式完全分离

4.运用内部样式表设定 CSS,一般叫作为嵌入式引入,这种方式是咱们练习时常用的方式

1.3 外边样式表(链接式)

实质研发都是外边样式表. 适合于样式比较多的状况. 核心是:样式单独写到CSS 文件中,之后把CSS文件引入到 HTML 页面中运用.

引入外边样式表分为两步:

1. 新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。

2. 在 HTML 页面中,运用 标签引入这个文件。

语法:
<link rel="stylesheet" href="css文件路径">

2、Chrome调试工具

1.Ctrl+滚轮 能够放大研发工具代码体积

2.左边是 HTML 元素结构,右边是 CSS 样式。

3.右边 CSS 样式能够改动数值(上下箭头直接输入)和查看颜色。

4.Ctrl + 0 复原浏览器体积

5.倘若点击元素,发掘右侧样式引入,极有可能是类名样式引入错误。

6.倘若有样式,然则样式前面有黄色叹号提示,则是样式属性书写错误。

本期结束了,本文内容均来自黑马程序员讲义,倘若有雷同是知识点相同。搬运麻烦标明出处,感谢支持原创内容。





上一篇:css样式
下一篇:css入门必学,基本重难点,css选取器
回复

使用道具 举报

1

主题

738

回帖

-1

积分

限制会员

积分
-1
发表于 2024-8-29 06:31:37 | 显示全部楼层
你的留言真是温暖如春,让我感受到了无尽的支持与鼓励。
回复

使用道具 举报

3089

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098770
发表于 2024-10-6 08:22:40 | 显示全部楼层
你的话深深触动了我,仿佛说出了我心里的声音。
回复

使用道具 举报

3070

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158931
发表于 2024-10-29 12:04:15 | 显示全部楼层
“NB”(牛×的缩写,表示叹为观止)‌
回复

使用道具 举报

3070

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158931
发表于 2024-10-30 22:51:49 | 显示全部楼层
外链发布社区 http://www.fok120.com/
回复

使用道具 举报

3089

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098770
发表于 2024-10-31 16:53:02 | 显示全部楼层
在遇到你之前,我对人世间是否有真正的圣人是怀疑的。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 12:20 , Processed in 0.169149 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.