【前端基础】内容构建——CSS基础（选中指定元素描述元素对象的样式）
CSS——基本样式
元素字体样式
color:gray rgb(255,255,255),#ff0000; 文字颜色
font-style:normal，itali,oblique; 文字倾斜（默认样式、斜体样式、倾斜样式; ）
font-weight:lighter,bolder,100,900; 文字粗细;
text-transform:uppercase/lowercase/capitalize; 文字大小写
文字三划线（去除删除、上中、下划线）
text-decoration:none,overline,line-through,underline;
文字阴影（平垂偏移值x、平垂偏移值y、模糊系数、颜色代码;）
text-shadow:2px 2px 10px #f00;
font-family:Arial,"Microsoft YaHei","黑体","宋体",sans-serif; 文字字体后备尝试机制;
@font-face{ 文字下载
font-family: myFirstFont; 必需。字体名称;
src:url('font/moon_light-webfont.woff');必需。字体文件的 URL
font-weight: 可选。字体粗细，默认是 "normal";
font-style: 可选。字体样式，默认是 "normal";
font-stretch: 可选。如何拉伸字体，默认是 "normal";
}
元素背景绘制
background-color:rbg(255,255,255); 背景颜色
background-image:url('images/wallpaper.jpg'); 背景图片
background-size: 50px; 背景大小
background-position: center left 背景起始位置
--[可选值]
top left 挨着上边和左边
top center 挨着上边的中间
top right
center left
center center
center right
bottom left
bottom center
bottom right
50px 50px
background-repeat:no-repeat; 背景排列
background-origin:padding-box
--[可选值]
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
Ps：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
background-attachment:fixed、scrool 属性设置背景图像是否固定或者随着页面的其余部分滚动
元素边框绘制
【常用边框绘制】
border:1px solid red; 像素 线类型 线颜色
--[线类型可选值]
type
none (无边框，或不存在)
hidden (隐藏边框)
dotted (点状框)
solid (实线框)
double (双线框)。两条单线的宽度和 border-width 值相同\
groove: (3D凹槽框)。效果取决于边界的颜色值\
ridge: (3D凸槽框)。效果取决于边界的颜色值\
inset： (3D嵌入(凹)边框)。效果取决于边界的颜色值\
outset：(3D 突出(凸)边框)。效果取决于边界的颜色值;
--[颜色可选值]
red
green
white
black
rgb(255,255,255)
【边框圆角绘制】
border-radius:25px;
border-radius:25px 25px;
border-radius:25px 25px 25px 25px; 左上角、右上角、右下角、左下角
【边框图片绘制】
border-image: url(images/border.png) 100% 100px 100px repeat repeat;
border-image: source slice width outset repeat;
source: 用于指定边框使用图片的路径。
slice: 图片边框向内偏移。
width: 图片边框的宽度。
outset: 边框图像区域超出边框的量。
repeat: 平铺（repeat）、铺满（round）或拉伸（stretch）。
元素可见属性
opactity:0-1; 透明度
display:none（不占布局隐藏）
visibility:hidden（占据布局隐藏）
CSS——选择器
先选中元素（传统理解就是鼠标选中，我们是代码选中），然后给这些元素配置样式就是选择器；
基类选择器
id和类选择器元素标记
<h4 id="font24">大臭逼h4>
<h1 class="red">牛逼h1>
id和类选择器设置样式
#red{
font-size:24px;
}
.red{
color:red;
}
通配标记
body{
color:red;
}
*{
color:red;
}
Ps：通配符用于给整片文档设置默认样式
逻辑选择器
合并逻辑
选择器1，选择器2，选择器3，……{
}
div,p,.album{
}
筛选逻辑
选择器[属性名]{
}
Ps:先用用选择器选中元素后，在进一步对元素进行筛选
input[type=button]{
color:blue;
}
input[type=button]{
color:blue;
}
input[class="fuck"]{
color:blue;
}
位置逻辑
选择器1 位置逻辑符 选择器2{
}
Ps:对于父子关系的标签、平行关系的标签进行选择；选择2意味着即使进行了位置选择的平移，但是仍然用选择器指定一个范围
.album .photos{color:red;} 子孙后台
.album > .photos{color:red;} 子元素
.album + .photos{color:red;} 相邻兄弟
.album ~ .photos{color:red;} 普通兄弟
序号逻辑
.progess:nth-child(2)
.progess:nth-child(2)
.progess:eq(0)
状态选择器
a:link{} - 正常，未访问过的链接。
a:visited{} - 已访问过的链接。
a:hover {} - 当鼠标滑动到链接上时。
a:active{} - 链接被点击的那一刻。
CSS——简单布局
定位-positon
#demo01{
positon:static
[可选值]
static：静止不同；left、top、right、bottm、z-index全部失效不可用；
relative：不删除自己的元素占位；相对于原来的位置做脱离文档流的平移；
absolute：删除自己的元素占位，相对于父级的位置做脱离文档流的平移；但是父级必须存在元素占位，否则相对位置就会一直父级的父级……，最后就会找到body；
fixed：固定定位，相对于屏
}
性质-display
#demo01{
display:block
[可选值]
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 不可调整宽高，无内边距，内部不能有块级；可以调外边距；
inline-block 行内块元素。（CSS2.1 新增的值）让布局容器同行存在，可设置宽高
[非常用可选值]
table 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 ），表格前后没有换行符。
table-row 此元素会作为一个表格行显示（类似 ）。
table-column 此元素会作为一个单元格列显示（类似 和 ）
table-row-group 此元素会作为一个或多个行的分组来显示（类似 ）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 ）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 ）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 ）。
table-caption 此元素会作为一个表格标题显示（类似 ）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
inherit 规定应该从父元素继承 display 属性的值。
}
浮动-float
高度为0：当元素的所有子元素全部浮动则自动识别的高度为0，通过给元素添加overflow：hidden解决
清除浮动：如果元素浮动则会脱离文档流，后面的元素会自动往上顶，如果不希望后面元素顶上来可以给后面的元素添加 clear:both
CSS——盒子布局
盒子布局
html每个元素为了针对内容和边距做分离处理以实现某些精确效果，采用盒子的模型来记录一个元素的占位情况；其中：
边距的定义：内容以外都叫做边距；
边距的分类：以边框作为界限，又分为外边距+内边距
内容区域控制
#demo01{
width:50px;
hegiht:60px
}
各个边距控制
整体希望群体移动利用——padding
局部个体相对移动利用——margin
#demo01{
margin: 50px;/*外边距*/
padding: 50px;/*内边距*/
border: 2px solid red;/*边框*/
}
赋值四法：
margin: 50px;/*四个方向*/
margin: 50px 100px;/*上下 左右*/
margin: 50px 50px 50px 50px/*上右下左 顺时针*/
元素属性与边距计算
现象实验
父级元素内边距挤压
当父级元素的垂直内边距之和>元素区域的时，会增加元素的高度；元素区域已经脱离文档流
当父级元素的水平内边距之和>元素区域的时，会增加元素的宽度；元素区域已经脱离文档流；
div块级元素默认效果
（1）默认宽高：
默认高度为0，由元素决定宽高
默认宽度占浏览器宽度；或者在祖先链中最近的可以确定祖先的宽度
（2）固定宽高：
当div是父元素时，子元素超出后自动脱离文档流，而不影响div本身宽高
当div是子元素时，父元素会用padding挤压div对象线运动，最后拉长父元素，div自身不改变宽高
（3）不固定宽高：
当div是父元素时，则会向下寻找所有子元素结合祖先限制组成宽高；
当div是子元素时，父元素会利用padding则超出部分会被挤压缩小穿透
常见问题
body默认边距：body自带上下左右8个像素的外边距，可以利用元素选择器来设置成0px；
元素粘连问题：当子元素的上边缘和上级元素的上边缘重叠时，给子元素添加上外边距会出现粘连问题，导致该父元素也被移动！父元素添加overflow:hidden；
块级元素同行：
想利用块级元素，可以自由定义宽高的优势，又想让他不独占一行，就得考虑到行内块；div通常是布局容器，具备宽高可以改变的特点，但默认块级元素导致布局容器无法同占一行，所以经常利用inline-block来让布局容器同行展示；
<div style="background-color:blue;height:200px;width:500px;display:inline-block">
<div style="background-color:yellow;height:20px;"> div>
<div style="background-color:yellow;height:20px;"> div>
div>
<div style="background-color:blue;height:200px;width:500px;display:inline-block;">
<div style="background-color:yellow;height:20px;">div>
<div style="background-color:yellow;height:20px;"> div>
div>
CSS——文字布局
【文字换行】
white-space：
nowrap;//强制换行
word-break：
normal //一直不换行
keep-all //整行中，超出不拆分保持，只有空格才触发换行
break-all //整行中，超出就拆分单词
word-wrap：
break-word // 长度超过一行的单词，直接独占多行；
over-break:
auto; /*若有超出即自动生成滚动条*/
【文字换行】
line-height:1.5; 行间距
letter-spacing:2px; 字符间距
word-spacing:1px; 单词间距
文本布局对齐
text-align:left,center,right,justify; 文本对齐
text-justify:inter-ideograph; 两端对齐（中文）;
text-indent:2em; 首行缩进;
text-transform:capitalize,uppercase,lowercase; 首页字母大写、全部大写、全部小写;
vertical-align:top,middle,bottom;垂直对齐模式;
多列布局
div {
column-count:3;//多少列
column-gap:40px;//列间距
column-width:20px;//列宽
column-rule:3px outset #ff0000;宽度、样式、颜色
}
CSS——flex布局
CSS——块级布局
CSS——高级布局
CSS——高级样式
控件控制
滚动控制
/*
整体属性————滚动条宽高
*/
::-webkit-scrollbar {
height: 10px;/*对水平流动条有效*/
width: 10px; /*对垂直流动条有效*/
}
/*
整体背景-外层轨
*/
::-webkit-scrollbar-track {
background-color: rosybrown;
border-radius: 3px;
}
::-webkit-scrollbar-track-piece {
background-color: darkred;
}
/*
滑块颜色
*/
::-webkit-scrollbar-thumb {
border-radius: 7px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #E8E8E8;
}
::-webkit-scrollbar-thumb:hover { /* 伪类 */
border-radius: 7px;
background-color: rgb(199, 201, 204);
}
/*
两边按钮
*/
::-webkit-scrollbar-button {
background-color: cyan;
}
/*
两个滚动条交汇处
*/
::-webkit-scrollbar-corner {
background: khaki;
}
video控制
aduio控制
拖拽式控制
响应式布局
颜色高级
渐变色效果
linear-gradient(red, blue); 水平渐变
linear-gradient(to right, red, blue); 垂直渐变
linear-gradient(to bottom right, red, blue); 对角渐变
linear-gradient(0deg, red, blue); 角度渐变
linear-gradient(red 10%, yellow 85%, green 90%); 比例渐变
repeating-linear-gradient(red, yellow 10%, green 20%); 重复渐变
linear-gradient( to right, rgba(255,0,0,0), rgba(255,0,0,1) ); 透明度渐变
radial-gradient(ellipse|circle, red, yellow, blue); 径向渐变
repeating-radial-gradient(red, yellow 10%, green 15%); 径向重复渐变
<div>
accesskey="h" 激活该元素的快捷键alt+？
contenteditable=" false"是否可以编辑
dir="auto" 文字方向
spellchec="" 是否拼写检查
tabindex="" tab次序
title="" 悬停显示内容
translate="" 是否翻译
>div>
2D/3D
2D变形
【移动】
transform: translate(10px,10px);
transform: translateX(10px);
transform: translateY(10px);
【缩放】
transform: scale(10,10);
transform: scaleX(10);
transform: scaleY(10);
【旋转】
transform: rotate(90deg);
【倾斜】
transform: skew(90deg,90deg);
transform: skewX(90deg);
transform: skewY(90deg);
3D变形
【移动】
transform:translate3d(10px,10px,10px);
transform:translateX(10px);
transform:translateY(10px);
transform:translateZ(10px);
【缩放】
transform:scale3d(10,10,10);
transform:scaleX(10);
transform:scaleY(10);
transform:scaleZ(10);
【旋转】
transform:rotate3d(10,10,10,90deg);
transform:rotateX(90deg);
transform:rotateY(90deg);
transform:rotateZ(90deg);
【透视图】
transform:perspective(2px);
CSS——常见需求
如何配置两个div同一行？
实践中，行内元素虽然同行却无法配置宽高，块级元素又排斥同一行，此时想要兼备两个属性就必须设置行内块
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* 父级div必须overflow: hidden清除副作用 */
#parent {
overflow: hidden;
text-align: center;
}
/*
子级div则分割父级的宽度，同时必须具备高度，因为div默认是0
然后为了同一行则必须配置 display: inline-block;
*/
#parent>div {
display: inline-block;
width: 49%;
height: 300px;
}
#parent>div:nth-child(1){
background-color: red;
}
#parent>div:nth-child(2){
width: 49%;
background-color: black;
}
style>
head>
<body>
<div id="parent">
<div>
div>
<div>
div>
div>
body>
html>
居中常见解决方案
定义：居中的本质定义是子元素相对父元素的内容边界的一个视觉效果！
整体居中（父类操作）
（1） 水平居中
父元素操作
子元素性质
子元素操作
text-align:center
行内
display: inline-block;
（2） 垂直居中
父元素操作
子元素性质
子元素操作
line-height: 300px；height: 300px（行高等于元素高）
行内
/
display:table-cell；vertical-align:middle）
块级（不定宽）
/
padding-top
(父元素高度-子元素高度)/2
/
line-height
同时增加上下边距
/
个体居中（自己操作）
（1）水平居中
子元素性质
子元素操作
块级（定宽）
margin: 0 auto;
（2）加粗样式
子元素性质
子元素操作
块级（定宽）
margin-top: 100px;（父元素高度-子元素高度)/2
你可能感兴趣的:(前端基础,html,css)