前端 ---- CSS基础
CSS基础
**样式重叠问题：**如果给同一个标签设置了相同的属性，此时样式会层叠盖，写在最下面的会生效
所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖
1.CSS的引入
内嵌式:CSS 写在style标签中
提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
外联式:CSS写在一个单独的.css文件中
提示:需要通过link标签在网页中引入，通常写在head标签内
行内式:CSS写在标签的style属性中
提示:一般配合js使用
2.基础选择器
2.1标签选择器
结构: 标签名{css属性名: 属性值;} eg：p{color:red}
作用: 通过标签名，找到页面中所有这类标签，设置样式
注意点:
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签
- 选中所有的这个标签都生效
2.2类选择器
结构: .类名{css属性名: 属性值;} eg: .one{color:red}
作用:通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点:
- 所有标签上都有class属性，class属性的属性值称为类名 (类似于名字)
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
2.3id选择器
结构: #id属性值 {css属性名: 属性值; } eg:#one{color:red}
作用: 通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点:
- 所有标签上都有id属性
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
2.4 通配符选择器
结构:*{css属性名: 属性值; }
作用:找到页面中所有的标签，设置样式
注意点:
- 开发中使用极少，只会在极特殊情况下才会用到
- 在小页面中可能会用于去除标签默认的margin和padding (后续会继续研究)
3. 文体和文本样式
3.1 字体样式
1）字体大小
属性名: font-size
取值:数字 + px
注意点:
谷歌浏览器默认文字大小是16px
单位需要设置，否则无效
2）字体粗细
属性名：font-weight
取值：
关键字:
正常 normal
加粗 bold
纯数字：100~900的整百数（推荐使用）
正常 400
加粗 700
注意点
- 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
- 实际开发中以:正常、加粗两种取值使用最多
3）字体样式（是否倾斜）
属性名：font-style
取值：
正常（默认值）： normal
倾斜： italic
4）字体系列
属性名: font-family
常见取值: 具体字体1,具体字体2,具体字体3,具体字体4,字体系列
具体字体:“Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等…
字体系列: sans-serif、serif、monospace等
渲染规则:
- 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
- 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点：
- 如果字体名称中存在多个单词，推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
- windows默认微软雅黑，macOS默认苹方
----常见字体系列 (了解)
无衬线字体(sans-serif)
- 特点:文字笔画粗细均匀，并且首尾无装饰
- 场景:网页中大多采用无衬线字体
- 常见该系列字体:黑体、Arial
衬线字体(serif)
- 特点:文字笔画粗细不均，并且首尾有笔锋装饰
- 场景:报刊书籍中应用广泛
- 常见该系列字体:宋体、Times New Roman
等宽字体(monospace)
- 特点:每个字母或文字的宽度相等
- 场景:一般用于程序代码编写，有利于代码的阅读和编写
- 常见该系列字体: Consolas、fira code
注意：font-family: 微软雅黑，黑体，sans-serif;
如果用户申脑没有安装微称雅黑，就按黑体显示文字 如果电脑没有安装黑体，就按任意一种非衬线学体系列显示
5）字体font相关属性的连写
属性名: font (复合属性)
取值:
font : style weight size family;
省略要求:
只能省略前两个，如果省略了相当于设置了默认值
注意点:如果需要同时设置单独和连写形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
3.2 文本样式
1）文本缩进
属性名：text-indent
取值： eg：text-indent：2em;
- 数字 + px
- 数字 + em（推荐：1em=当前标签font-size的大小）
2）文本水平对齐方式
属性名：text-align
取值:
属性值 效果
left 左对齐
center 居中对齐
right 右对齐
注意点:
如果需要让文本水平居中，text-align属性给文本所在标签 (文本的父素)设置
使用范围：文本、span标签、a标签、input标签、img标签等都可以
3）文本修饰
属性名:text-decoration
取值:
属性值 效果
underline 下划线(常用)
line-through 删除线 (不常用)
overline 上划线(几乎不用)
none 无装饰线(常用)
注意点:
开发中会使用 text-decoration:none;清除a标签默认的下划线
3.3 行高
作用:控制一行的上下行间距
属性名: line-height
取值:
- 数字+px
- 倍数(当前标签font-size的倍数)
应用：
- 让单行文本垂直居中可以设置 line-height:文字父元素高度
- 网页精准布局时，会设置 line-height:1 可以取消上下间距
行高与font连写的注意点
- 如果同时设置了行高和font连写，注意覆盖问题
- font : style weight size/line-height family :
4.Chrome调试工具
- 如何打开：1.打开页面 》鼠标右键 》检查 》Elements元素 Styles样式
2.打开页面 》Fn+F12键
- 选中+键盘上下键可调大小
- 在需要调试的标签Styles中，选中最后一个按Tab键可换行增加新的CSS样式并调试
- 样式前的框框勾上代表该CSS在生效
5.拓展
5.1 颜色常见取值（了解）
属性名:
如: 文字颜色: color
如:背景颜色: background-color
属性值:
5.2 标签水平居中方法总结 margin:0 auto
问：如果需要让div、p、h (大盒子) 水平居中?
答：可以通过margin:0 auto;实现
注意点:
如果需要让 div、p、h (大盒子) 水平居中，直接给 当前元素本身 设置即可
margin: 0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
前端 ---- CSS基础相关推荐
- 前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理 文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
- 前端css基础知识点之opacity——透明度
前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持 特点 设置opacity的元素的所有后代会一起具 ...
- 前端——CSS基础学习【part 2】
前端--CSS基础学习[part 2] Emmet CSS的复合选择器 CSS的元素显示模式 CSS的背景 CSS的三大特性 CSS 盒子模型 Emmet 快速生成HTML结构语法 (1)生成标签,输 ...
- 前端CSS基础之案例--图片
用<前端CSS基础>文章里的内容完成一个图片案例 效果展示: 代码实现: <!DOCTYPE html> <html lang="en"> &l ...
- 前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧 把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...
- 从头学前端-CSS基础01
CSS简介: CSS是层叠样式表的简称,有时也会称之为CSS样式表或级联样式表.CSS也是一种标记语言(和html一样,不是个编程语言): Html主要是页面结构,显示元素内容,CSS是美化页面,布局 ...
- 从头学前端-CSS基础02
一个工具: 前端快速开发插件Emmet Emmet 的前身就是 Zen Coding. 它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具.将它整合进文本编辑器,可以提供一些功能和快捷 ...
- 前端 CSS 基础笔记
CSS入门 一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表 是一组样式设置的规则,用于控制页面的外观样式 二.基本用法 1.css语法 <hea ...
- 前端CSS基础7.8
1.css选择器:相当于一个标识,有3种选择器 第一种选择器:标签选择器 p{ color:red;} 第二种选择器:class选择器 .c1{ color:green;} 可被多次调用 第三种选择器 ...
- web前端---css基础
一.CSS技术 1.什么是CSS CSS全称叫做层叠样式表stylesheet,是用来修饰HTML网页的一门技术,增强网页的展示能力. 主要是使用CSS属性来实现,最终可以将css代码和HTML网页代 ...
最新文章
- 女皇万岁！我们是来送礼的 ——阿里聚安全春天系列全套大礼包
- 80. Leetcode 1642. 可以到达的最远建筑 (堆-技巧三-事后小诸葛)
- 神策数据多少含金量？PICOOC 有品帮你智能称量
- loss=nan解决办法
- Python中get()函数用法【详解】——Python系列学习笔记
- 计算机网络互联网技术实验报告,2013计算机网络技术与应用.实验报告01
- golang http Specifically check for timeout error
- python创建一个字典、其中值为1_从2个列表创建一个字典，其中一个作为键，另一个作为python中的值...
- Android手机截图怎么做,怎样在手机上截图(安卓手机、苹果手机截图方法）
- 系统函数,频率响应定义
- 数字音视频技术是我国产业发展的重大核心技术
- 企业如何做好员工关怀,减少人才流失
- 通信感知一体化技术思考
- uniapp app微信授权登录
- 2013一些好的句子
- 工控之台达HMI和三菱FX PLC连接
- 使用 python socket 执行远程服务器程序
- java版我的世界游侠怎么联机_我的世界如何联机手机版
- 关于Ubuntu中使用teamviewer
- 计算机检测报告素材,笔记本检测报告模板.doc