css学习

风中飘落的玫瑰 發表於 2020-8-23 16:33:00

<h2>DIV+CSS</h2>
<h3>div</h3>
　　DIV是层叠样式表(css)中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。
　　通俗来说：div在页面布局中，主要作为承载内容的容器！没有任何的默认样式，所有的外观样式都需要我们自己调整！
　　css就是用来表现HTML样式的计算机语言，为html化妆！
<h2>css</h2>
　　层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言(js)动态地对网页各元素进行格式化。
　　CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
<h3>css的引入方式</h3>
　　1.行间引入、行内样式
　　在标签的行间使用style标签属性来设置css样式
　　弊端：
　　　　代码的复用性极差，代码可读性也很差！
　　优势：
　　　　优先级高、调试代码时比较方便！
 　　css样式属性与标签属性的区别：
　　　　1、标签属性书写的位置是在标签行间，而css样式属性书写的位置在特定的标签属性、标签、文件中！
　　　　2、标签属性的语法格式：标签属性名="值" 标签属性名="值"
　　css样式属性：css属性名: 值; css属性名: 值;
　　2.内部引入、内联样式
　　在head标签内部，使用style标签，配合选择器为标签设置css样式
　　弊端：
　　没有从本质上实现样式与结构的分离
　　选择器：css选取标签的一种机制，不同的选择器选择标签的机制是不一样的，通过选择器找到匹配的标签后，才能设置css样式
　　选择器的书写格式：
　　选择器名称 {
　　　　css属性名: 值;
　　　　css属性名: 值;
　　　　...
　　　　　　}
　　3. 外部引入、外联样式
　　外部的css文件
　　1、首先我们需要单独创建一个css文件，在文件中使用选择器找到对应的标签，来设置样式
　　2、在html文件内部的head标签内，使用link标签，来导入外界的css文件
注意事项：
　　1、在一个html文件内部，可以使用多次link标签，来引入多个外界的css文件！
　　2、如果引入的多个文件中，存在重复的样式而且是使用同样的选择器来设置的，按照加载顺序后覆盖前！
<h2>选择器</h2>
　　1.什么是选择器？
　　css选取标签的一种机制，不同的选择器选择标签的机制是不一样的，通过选择器找到匹配的标签后，才能设置css样式
　　常用的选择器有三个：标签、id、类class选择器
　　标签选择器：
　　　　语法格式：标签名 {css样式集合}
　　　　选取原则：为这一类标签设置样式
 　　2.id选择器　　
　　　　语法格式：#id名称 {css样式集合}
　　　　选取原则：为添加了此id的标签设置样式，可以选择唯一的一个标签！
　　注意事项：
　　　　(1)在一个html文件中，标签的id名称是不能重复的，是唯一的！
　　　　(2为标签设置id值，需要在标签行间使用id行间属性来赋值
　　　　(3)id名称切勿随意命名，遵循变量名的命名规范即可！最好见名知意！　　
　　类class选择器：
　　语法格式：.类名 {css样式集合}
　　选取原则：为添加了此类名的标签设置样式，可以同时为多个标签设置样式！
　　注意事项：
　　　　(1)类名的命名规范与id名称的命名规范一致！
　　　　(2)一个标签可以添加多个类名，多个类名在class标签属性中以空格隔开
　　　　(3)一个类也可以添加给多个标签
<h3>css样式冲突问题 </h3>
　　如果有一天你书写的样式出不来，原因是什么？
 　　 1、写错了~
　　  2、样式被覆盖了！
  　　样式覆盖产生的原因有两种：
 　　　　1、相同类型的选择器选择到了同一个标签，设置了同样的样式，按照文档加载顺序后覆盖前！
　　　　 2、不同类型的选择器选择到了同一个标签，设置了同样的样式，此时与加载顺序无关，只与选择器优先级相关！
　　　　 标签 < 类class < id
<h2>常见的css样式</h2>
<h3>　　文本样式</h3>
　　常用样式：
　　　　color：字体颜色
　　　　　　英文单词、十六进制代码、rgb(0~255，0~255, 0~255)
　　　　font-size：字体大小
　　　　font-weight：字体加粗效果
　　　　　　bold值，可以实现字体加粗效果
　　　　font-style：字体样式
　　　　　　italic值，可以实现字体倾斜
　　　　font-family：字体，想要呈现不同的字体，首先你得保证浏览器内能有识别的字体库！
　　　　text-decoration：文本修饰
　　　　underline下划线、overline上划线、line-througn删除线、none无修饰
　　　　text-align：文本横向的对齐方式
　　　　　　默认值left左对齐、center居中对齐、right右对齐
　　　　letter-spacing：字符间距
　　　　line-height: 行高
　　　　　　单行文本行高与容器高度一致，可以实现垂直居中
　　　　　　多行文本行高的设置会影响行与行之间的距离，为了确保行间距产生，那么行高的值要大于字体大小
<h3>　　超链接伪类样式</h3>
　
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>超链接伪类样式/伪类选择器</title>
 <style type="text/css">
 a {
 font-size: 30px;
 }
 /*未被访问*/
 a:link {
 text-decoration: none;
 color: blue;
 }
 /*被访问过*/
 a:visited {
 color: green;
 }
 /*鼠标悬停*/
 a:hover {
 text-decoration: underline;
 color: red;
 }
 /*正在访问、正在点击*/
 a:active {
 color: pink;
 }
 </style>
</head>
<body>
 <a href="#">百度</a>
</body>
</html></pre>
</div>
　　如果想要让a标签的四个伪类样式都起作用，那么必须按照lvha的顺序来设置！一旦顺序改变，则不起作用！
<h3>　　盒模型</h3>
　　　　盒模型，也称为盒子模型，内容包含了：外边距margin、边框border、内边距padding、内容content！
　　一个元素的显示范围不仅仅是我们对其设置的width宽度以及height高度！
　　横向宽度：内容宽度 + 左侧、右侧边框宽度 + 左侧、右侧内填充(padding)的距离
　　纵向高度：内容高度 + 上侧、下侧边框宽度 + 上侧、下侧内填充(padding)的距离
<h3 class="15">　　一个元素的作用范围是：</h3>
　　横向宽度：内容宽度 + 左侧、右侧边框宽度 + 左侧、右侧内填充(padding)的距离 + 左侧、右侧外边距(margin)的距离
　　纵向高度：内容高度 + 上侧、下侧边框宽度 + 上侧、下侧内填充(padding)的距离 + 上侧、下侧外边距(margin)的距离
<h3 class="15">　　外边距margin：</h3>
　　　　(1) 四个方向，分别是margin-left、margin-right、margin-top、margin-bottom
　　　　(2)一个复合属性margin
　　　　　　一个值上下左右
　　　　　　两个值上下左右
　　　　　　三个值上左右下
　　　　　　四个值上右下左
　　　　(3) 、在给定的外边距区域内，不能存在任何内容，所以会让元素本身发生偏移！
　　　　(4) 、margin的冲突问题
　　　　　　如果纵向产生了冲突，取大作为两者之间的距离
　　　　　　如果横向产生了冲突，取和作为两者之间的距离
　　　　(5) 、外边距的距离问题：
　　　　　　如果是同级，则为边框外的侧到边框外侧距离
　　　　　　如果是父子级，是子级边框外侧到父级边框内侧的距离
<h3 class="15">　　内边距：</h3>
　　　　一个元素设置内边距，代表其内侧区域不能存在任何内容，所以也可以实现子级元素的位置偏移，但是要注意，一个元素设置了内填充，它的范围会变大，所以我们应当在width及height上减去内填充的距离，以保持原样！
<h2>　　浮动</h2>
<h3 class="15">　　　　浮动的知识点：</h3>
　　　　　　(1)float的值可以是left或者right，表示从父级的左侧、右侧开始横向排列，如果空间不够了，自动换行，这就是浮动带来的布局效果！
　　　　　(2)浮动元素会脱离标准的文档流，不再占据空间，所以如果不对其进行处理，会对没有浮动效果的正常布局产生影响，所以我们要清浮动！
<h3 class="15">　　　　清浮动的解决方案：</h3>
　　　　　　在浮动元素同级以下，设置一个空的div，并为这个div设置一个clear属性。
　　　　　　both左右浮动都清除、left只清除左浮动、right只清除右浮动！
　　　　　　清浮动就是将浮动元素，按下去，回到标准的文档流中！
<h2>　　定位</h2>
　　　　HTML默认的布局方式是不会出现重复的元素的，就是说在一个位置上不可能出现重复的元素。但是在某些情况下需要改变元素的位置和显示效果，此时我们就需要用到定位技术！
　　定位的css属性为position：
　　static：默认值，表示是普通的流式布局，完全在文档中按照从上往下、从左往右显示
　　定位之后，是要做位置的偏移的！只有设置了定位属性之后，才能使用left、right、top、bottom让一个元素发生位置的改变！
　　relative：相对定位。偏移参照物为该元素原有的位置，而且发生偏移后，元素原先的位置依旧存在，不会影响其他元素的布局！
　　left正值往右、right正值往左、top正值往下、bottom正值往上！
　　absolute：绝对定位。偏移参照物为离其最近的一个设置了定位属性的父级元素！如果都没有设置定位属性，则以body元素为参照进行偏移！而且元素会完全脱离文档流，原有的空间也不复存在了！
　　left正值，从参照元素的左侧边框往右偏移
　　right正值，从参照元素的右侧边框往左偏移 　　top正值，从参照元素的上边框往下偏移
　　bottom正值，从参照元素的下边框往上偏移

</div>
<div id="MySignature" role="contentinfo">
见贤思齐焉见不贤而内自省也 
来源：https://www.cnblogs.com/a595452248/p/13526298.html

頁: [1]

琼殿技术论坛's Archiver

css学习