前端开发-css入门
程序员文章站
2022-12-21 10:00:18
CSS cascading（层叠） style（样式） sheet（表） css注释 引入方式 css选择器 基本选择器 元素选择器 div{ } id选择器 #demo 在html中(id="demo") 类选择器 .demo 在html中(class="demo") 通用选择器 *{ } 组合选 ......
css
cascading（层叠） style（样式） sheet（表）
css注释
/* 注释内容 */ 快捷键:ctrl ?
引入方式
<!-- 1.行间样式 -->
<div style="width:100px;height:100px;"></div>
<!-- 2.页面集 -->
<head>
<style>
div{
background-color: red;
height: 100px;
width: 100px; }
</style>
</head>
<!-- 3.外部css文件(另建css文件) -->
<link rel="stylesheet" href="css文件路径" >
css选择器
-
基本选择器
元素选择器 div{ } id选择器 #demo 在html中(id="demo") 类选择器 .demo 在html中(class="demo") 通用选择器 *{ }
-
组合选择器
后代选择器 div a 找div下所有的a 直接子元素选择器 div>a 只找下一代a 兄弟选择器 div.a 只找下一个兄弟 弟弟选择器 div~a 找到所有兄弟 属性选择器 [title] 分组选择器 demo1，demo2 伪类选择器 a:link a:visited a:hover a:sctive input:focus 伪元素选择器 p::before p::after 伪元素存在任意一个元素里面
css权重
！important infinity 行间样式 1000 id 100 class/属性/伪类选择器 10 标签选择器/伪元素 1 通配符 0
css常用属性
- 字体属性
font-size:12px; (规定文本的字体尺寸。设置的是字体高)
font-weight:bold; (规定字体的粗细。相当于strong，加粗) 100-900
lighter（更细）/ normal（默认值，标准粗细）/ bolder（更粗）
font-style:italic (规定文本的字体样式。相当于em，斜体)
font-family:arial； (规定文本的字体系列。)
- 颜色设置
1.纯英文单词 red/black
2.颜色代码 #000000(#000)白色 #ffffff(#fff)黑色
光学三原色：红绿蓝
美学三原色：红黄蓝
3.颜色函数
rgba (255,255,255,0.3) 数值在0-255 0.3透明度
r g b
00-ff 00-ff 00-ff
- 边框设置
border:1px solid black ;
1px:边框 solid:展示形式 black边框颜色
boeder-width border-style border-color
dotted:点状虚线
dashed:条状虚线
border-radius:50%; ⚪ 控制圆角
- 文字常用设置
text-align:center; 文字水平对齐
right/left
line-height:10px; 行间距
单行文本垂直居中 ： height =line-height（容器高度=文本高度）
文字行高1.2倍 ：line-height:1.2em;
行高4种方式：
line-height:normal; 默认方式
1. line-height:1.5;
2. line-height:200%;
3. line-height:10px;
4. line-height:5em;
- a标签 text-decoration:line-though; 穿过文本的一条线 none 无线 underline 下划线 overline 上划线 curson:pointer; 手 鼠标放在上面的图样 help; ？ e-risize; → move; +
- display 标签类型的转换
标签
- inline 行级元素 内容决定元素所占位置大小，不可以通过css改变宽高，具有文字特性。eg：span\strong\em\a\del...
- block 块级元素 独占一行，可以通过css改变宽高。eg: div\p\ul\ol\li\form\h1-h6...
- inline-block 行级块元素 内容决定大小可以改变宽高。eg: img
- 块级元素可以嵌套某些块级元素和行级元素，行级元素可以嵌套行级元素。 p标签不可以嵌套p标签，也不可以嵌套块级元素。a标签不能嵌套a标签
盒模型
1. 盒子壁 border 2. 内边距 padding 3. 盒子内容 width + height+(element) margin +border +padding+ ( conte =width +height)
padding/margin: 100px 100px 100px ; 三个数值的情况 上 左右 下 100px 100px; 两个数值的情况 上下 左右
100px 一个数值的情况
上下左右 两个情况: 垂直方向如果上下两个标签都设置了margin外边距,那么取两者的最大的值
水平方向,两个标签都设这外边距,取两者的边距之和
层模型 position
1.absolute 绝对定位 1)脱离原来位置进行定位 2)相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位 2. relative 相对定位 1)保留原来位置进行定位 2)相对于原有位置进行定位 用relative 作为参照物 用absolute进行定位 3. fixed 固定定位
居中定位(广告)
div {
position: absolute;
left: 50%;
right: 50%;
width: 100px;
height: 100px;
background-color: red;
margin-left:-50px;
margin-top: -50px;
}
浮动模型float
float:left/right;
单行排：父级边界大小排列 1. 浮动元素产生了浮动流 所有产生了浮动流的元素，块级元素看不到 产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到浮动元素
bfc
block format context 块级格式化上下文 （让盒子所附的语法规则发生改变）
触发盒子的bfc 4种方式
1)position：absolute;
2)display:inline-block;
3)float:left/right;
4)overflow:hidden; 溢出盒子部分隐藏
2. 清除浮动流（必须是块级元素） clear:both; 3. content: 只在伪元素中起作用 4. 伪元素是行级元素::before\::after inline属性 5. position:absolute; float:left/right; 这两个从内部把元素转换为inline-block; 包裹浮动元素 行级元素只能嵌套行级元素 块级元素可以嵌套任何元素 除<p> </p> a标签不能套用a标签
文字溢出处理overflow
单行文本处理
white-space:nowrap;/*文字溢出处理*/
overflow:hidden;
text-overflow:ellipsis;/*点点点显示*/
多行文本处理
手动，后端
多数使用截断，溢出部分隐藏
width:200px;
height:40px; /*文本高度2倍*/
line-height:20px;
border:1px solid #000;
overflow:hidden;
visible:默认值。内容不会被修剪，会呈现在元素框之外。
hidden:内容会被修剪，并且其余内容是不可见的。
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该从父元素继承 overflow 属性的值。