文章目录
CSS基础部分自学笔记
内联样式
也称行内或行间样式，是在html标签上添加style属性来实现的
内部样式
在
标签内添加的样式，内部样式的代码可以复用、符合W3C标准，尽量让结构和样式分开处理
外部样式
rel：指定资源跟页面的关系
href：资源的地址@import url(./common.css);
这种方式有很多问题，不建议使用
颜色表示法
- 单词表示法
- 十六进制表示法
- RGB三原色表示法（范围0-255）
CSS背景样式
CSS边框样式
//利用CSS边框实现三角形 <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document title> <style> div { width: 0px; height: 0px; border-top-color: transparent; border-top-style: solid; border-top-width: 30px; border-right-color: red; border-right-style: solid; border-right-width: 30px; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 30px; border-left-color: transparent; border-left-style: solid; border-left-width: 30px; } style> head> <body> <div> div> body> html> 复合样式：border:1px red solid;（边框大小 颜色 样式）对单个边也可以用
CSS文字样式
font-family：字体类型
- 设置多字体方式（使其能够适应更多的计算机和设备）
- 引号的问题（有的字体中间有空格，必须用引号引起来）
font-size：字体大小（默认大小16px），字体大小一般为偶数
| 属性取值 | 字体大小 |
|---|---|
| xx-small | 最小 |
| x-small | 较小 |
| small | 小 |
| medium | 正常（默认值） |
| large | 大 |
| x-large | 较大 |
| xx-large | 最大 |
CSS段落样式
- word-break：break-all; 非常强烈的折行
- word-wrap：break-word; 不是那么强烈的折行
CSS选择器
- ID选择器
- CLASS选择器
- 标签选择器
- 群组选择器/分组选择器
css:div,p,span{} - 通配选择器
- 层次选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
- 结构性伪类选择器
CSS样式继承
CSS优先级
- 相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况 - 内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同的样式，那么后写的引入方式优先级高 - 单一样式优先级
style行间（权重1000）> id（权重100） > class（权重10）> tag（权重1）> 继承 - !important（不能针对继承的属性进行优先级的提升）
提升样式优先级，非规范方式，不建议使用 #elem{color:red !important;} - 标签+类与单类
标签+类 > 单类 - 群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高 - 层次优先级
权重比较、约分比较
CSS盒子模型
标签分类
布局一般用块标签，修饰文本一般用内联标签
显示框类型
标签嵌套规范
溢出隐藏
透明度与手势
最大、最小宽高
html,body{
height:100%} .contrainer(height:100%} CSS的默认样式
CSS重置样式
*{
margin:0;padding:0;} ul{
list-style:none;} a{
text-decoration:none;color:#666;} img{
display:block;} 图片和容器底部有一些空隙
vertical-align:baseline;基线对齐 ==>vertical-aglin:bottom;底线对齐display:block;//推荐
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/229966.html原文链接：https://javaforall.net
![3.Eclipse创建第一个Java项目[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
