18号CSS学习
一、CSS简介
1.HTML局限性
- 只关注内容的语义。
- “丑”
2.CSS-网页的美容师
- CSS是层叠样式表的简称，也称为CSS样式表或级联样式表。
- 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽度、边框样式、边距等）以及版面的布局和外观显示样式。
- 美化HTML。
- HTML主要做结构，显示元素内容。
- CSS美化HTML，布局页面。
- CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。
3.CSS语法规范
- CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
<style>
p {
color:red;
font-size: 12px;
}
</style> <body>
<p>有点意思</p>
</body>
4.CSS代码风格
- 以下代码书写风格符合实际开发
- 样式格式书写：紧凑风格和展开风格，推荐展开风格。
- 样式大小写：提倡小写字母。
- 空格规范：属性值前冒号后，保留一个空格；选择器（标签）和大括号之间保留一个空格。
二、CSS基础选择器
1.CSS选择器的作用
- 选择标签用的。
- 分为基础选择器和复合选择器。
- 标签选择器
- 类选择器（最常用）
- 类选择器-多类名
- id选择器
- 通配符选择器
三、CSS字体属性
- 使用font-family属性定义字体。
- 使用font-size属性定义字体大小。（谷歌浏览器一般默认16px）
- 使用font-weight属性定义字体粗细。
- 使用font-style属性定义文字样式。（italic/normal）
- 复合属性 font: font-style font-weight font-size font-family（ 必须保持这个顺序，不设置的属性可省略，size和family属性必须有）
四、文本属性
- 文本的外观
- 文本颜色（颜色值、十六进制、RGB，十六进制最常用）
- 对齐文本text-align属性
- 装饰文本text-decoration属性（可以给文本添加常用下划线underline、不常用删除线line-through、几乎不用上划线overline、最常用默认none）
- 文本缩进text-indent属性（text-indent: 20px; text-indent: 2em;）
- 行间距line-height属性（line-height: 26px;）(PastStone Capture软件测量)
五、CSS引入方式
- CSS的三种样式表：按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类。
1.行内样式表（行内式）
- 在元素标签内部的style属性中设定CSS样式（<p style="color: red";> </p>）
- 控制当前的标签样式设置。
2.内部样式表（嵌入式）
- 写到HTML页面内部，是将所有CSS代码抽取出来，单独放到一个<style>标签中。理论上<style>标签可以放在html文档的任何地方，但一般放在<head>标签中。
- 方便控制当前整个页面的元素样式设置。
- 代码结构非常清晰，但并没有实现结构与样式完全分离。
3.外部样式表（链接式）
- 实际开发中使用，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
- 两步：1.新建一个后缀为.css的样式文件，把所有CSS代码都放入此文件。2.在HTML页面中，使用<link>标签引入这个文件。
<link rel="stylesheet" href="css文件路径">
六、Emment语法
- 来提高HTML/CSS编写速度，Vscode内部已经集成该语法。
- 快速生成HTML结构语法
- 生成标签，直接输入标签名按tab键即可。
- 若想生成多个标签，加上*即可，div*5。
- 父子级关系ui>li。
- 兄弟级关系div+p。
- .nav按tab键生成class="nav";#nav生成id="nav";默认生成div标签。其他的可p.nav。
- 自增符号$，生成有顺序的加上$即可，.demo$*5。
- 标签里面显示文字用{}即可，div{直接写内容}。
- 快速生成CSS样式语法
- 比如w200 按tab键 可以生成width: 200px。
- 比如lh26px 按tab键 可以生成line-height: 26px。
- 格式化代码。
18号CSS学习的更多相关文章
- 6号css学习小记
一.overfloat属性:(四个值) visible :默认值.内容不会被修剪,会呈现在元素匡之外. hidden:内容会被修剪,并且其余内容是不可见的. scroll :内容会被修剪,但是浏览器会 ...
- CSS 学习手册
目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- CSS学习（一）
/*</br> * color</br> * background-color background-image background-repeat background-po ...
- CSS学习之float解析
转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或 ...
- CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
- HTML与CSS学习记录
title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...
- HTML与CSS学习笔记(1)
1.web三大核心技术? HTML CSS JavaScript 2.HTML基本机构和属性 HTML:超文本 标记 语言 超文本:文本内容+非文本内容(图片.视频.音频等) 标记:<单词> ...
- 47.前端css学习、登陆页面的制作
CSS: 有了CSS,html中大部分表现样式的标签就可以不用了 html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁 CSS的引入方式: 内联式引入:直接赋予标签styl ...
随机推荐
- 教你一招，测试人员如何通过AI提高工作效率！
伴随着AI技术的兴起,像OpenAI推出的ChatGPT.Microsoft发布的Microsoft 365 Copilot.阿里的通义千问.百度的文心一言.华为的盘古大模型等.很多测试人员开始担心, ...
- Cookie——基本使用
Cookie 基本使用 Cookie 原理 Cookie 使用细节 Cookie jsp中获取Cookie
- Windows系统之“关闭windows 文件夹分组”
不知道怎么就按出来了 文件夹分组 ,也不知道怎么关闭,别扭了好久 解决办法: 右键点击文件夹空白处,选择 "分组依据" --> 然后选择 "无"
- constexpr声明 常量表达式
constexpr 是 C++ 中用于声明 常量表达式 的关键字,表示一个变量或函数的值在编译时就可以确定,而不是在运行时计算. 这对优化非常有用,因为编译器可以直接将结果嵌入到程序中,减少运行时 ...
- Java日期时间API系列24-----Jdk8中java.time包中的新的日期时间API类，MonthDay类源码和应用，对比相同月日时间。
Java8中为月日新增了类MonthDay,可以用来处理生日,节日.纪念日和星座等周期性问题. 1.MonthDay 特别需要注意的:它的默认打印格式会带前缀"--" ,比如--1 ...
- Tarjan 算法
远古算法笔记. dfs 生成树 无向图 对于一张连通的无向图,我们可以从任意一点开始 dfs,得到原图的一棵生成树(以开始 dfs 的那个点为根). 这棵生成树上的边称作树边,不在生成树上的边称作非树 ...
- 2024 年 04 月编程语言排行榜，PHP 排名创新低？
编程语言的流行度总是变化莫测,每个月的排行榜都揭示着新的趋势.2024年4月的编程语言排行榜揭示了一个引人关注的现象:PHP的排名再次下滑,创下了历史新低.这种变化对于PHP开发者和整个技术社区来 ...
- 安装nvm管理node版本（npm、yarn）
安装nvm管理node版本(npm.yarn) 一.下载安装nvm nvm网址:https://nvm.uihtm.com/ 1.点击下载链接下载nvm 2.将下载的压缩包解压,解压后双击安装包,然后 ...
- 一文读懂 KubeSphere 企业版 4.0：多品类生态价值赋能的里程碑
近日,青云科技 KubeSphere 团队革新先行,重磅发布了沉淀数年.倾力打造的全新分布式云原生可扩展开放架构--KubeSphere LuBan,以及在此之上构建的化整为零.全能开放.随时随地自由 ...
- KubeSphere 接入外部 Elasticsearch 最佳实践
作者:张坚,科大讯飞开发工程师,云原生爱好者. 大家好,我是张坚.今天来聊聊如何在 KubeSphere 中集成外置的 ES 组件. KubeSphere 在安装完成时候可以启用日志组件,这样会安装 ...