自学笔记--css

最新推荐文章于 2023-10-02 22:46:24 发布

害群的码

最新推荐文章于 2023-10-02 22:46:24 发布

阅读量400

点赞数

文章标签： vue.js node.js javascript

本文链接：https://blog.csdn.net/qq_56149957/article/details/124578280

版权

一。CSS简介
1.css是层叠样式表，是一种标记语言
2. a.内联样式；直接写在标签中的
b。内部样式；写在<head>里面
c.外部样式；写在<head>里面<link rel="stylesheet" href="css的名字.css" type="text/css">

二。字体属性
1.font-family：“宋体”“微软雅黑”，arial；（设置字体系列）
2.font-size：20px；（定义字体大小默认是16px）
3.font-weight：normal（默认）；【bold/bolder/】{定义字体粗细}
4.font-style：normal(默认);（italic；加入这个属性字体会倾斜）
5.字体复合属性；font:font-style font-weight font-siae font-family;(不能随意更改顺序 /font-size font-family 这两个属性必须要有)

三。文本属性
1.color：pink；（设置文本的字体颜色）
2.text-align：center；（设置文本的对其方式【center；居中对齐/left；左对齐默认/right；右对齐】）
3.text-decoration：none；（给文本添加下划线【underline】/上划线【overline】/删除线【line-through】）
4.text-indent：2em；（让文本缩进几个像素）【em=16px】
5.line-height：20px；（设置行与行之间的高度）

四。伪类选择器（按照这个顺序写代码）
1.a：link{}（选择没有被访问的时候）
2. a:visited{}(选择访问过后的时候)
3.a：hover{}（鼠标经过时div的style变为hover中的规格样式）
4.a:active{}(选择鼠标按下未弹起的时候)

5.input：focus{}（一般情况是input表单元素获得焦点是才能执行的代码可以用于更该样式）

五，元素显示模式
1.块级元素；一行内只能放入一个元素的就是块级元素【<h1>-<h6>/<p>/<div>/<ul>/<ol>/<li>】
a.独占一行/高度，宽度，内外边距可以控制
b。宽度默认100%/ 里面可以放入行内或者块级元素

2.行内元素；一行内可以放入多个元素的就是行内元素【<a>/<span>】
a.一行内可以显示多个元素/高度，宽度直接设置是无效的
b.默认宽度是内容本身的宽度/他只能容纳文本或其他行内元素

3.行内块元素<img>/<input>/<td>(他们同时具有块级元素和行内元素的特点)
a。相邻行内元素在同一行，但是他们之间会有空白缝隙
b。高度，宽度，内外边距都可以控制

4.显示模式的转换
a.display:block;(将行内元素转换为快级元素)
b。display：inline；（将块级元素转换为行内元素）
c。display：inline-block；（转换为行内块元素【开发中最常用】）

d。文字垂直居中技巧【line-height：；=盒子的高度】

六，背景样式【如果同时设置颜色和图片则图片会在颜色上面】
1.背景颜色；background-color：；（定义元素的背景颜色）
2.背景图片；background-image：url（图片的地址）；（定义背景图片）
3.背景平铺；background-repeat：no-repeat；（定义背景图片的样式；【repeat是平铺/repeat-x是按x方向平铺/repeat-y是按y方向平铺】）
4.背景图片位置；background-position：x y；（改变图片在背景中的位置///xy也可以是方位名词//也能使用混合单位但是第一个是x，第二个是y）
5.背景图像的固定；background-attachment：scroll（默认随对象内容滚动）；【fixed背景图像固定不动】
6.背景的复合写法；background：背景颜色背景图片背景平铺背景滚动背景位置；
7.背景颜色的透明效果：background：rgba（0，0，0，0.3）；（背景颜色半透明，内容不受影响）
opacity: 0.8;设置背景图片的透明度

8.背景色渐变；
语法：background：-webkit-linear-gradient（起始方向，颜色1，颜色2）；【默认从上向下】
background-image: linear-gradient(red,pink);
background-image: linear-gradient(transparent,rgba(0,0,0,.5)); 渐变到黑色加上透明色
在盒子里面加入img标签，在里面添加一个大小一样的盒子，定位到一起然后，帮盒子添加渐变就是现在企业的做法

七，CSS的三大特性
1，层叠行；如果给相同的选择器设置相同的样式此时一个样式就会覆盖另一个样式
原则；样式冲突，遵循的原则是就近原则，那个样式离结构近就执行那个样式//
如果样式不冲突，不会层叠

2，继承性；子标签会继承父级标签的某些样式，如文本颜色和字号
原则；子元素可以继承父元素的样式【text-/font-/line-这些元素开头可以继承，以及color属性】
行规的继承；行高可以不更单位// 如果子元素没有设置行高则会继承父元素的行高// 此时子元素的行高是当前子元素的文字大小的1.5倍

3.优先级；行内样式style=“”》 id选择器》类选择器和伪类选择器》元素选择器》继承或者*

八。盒子模型
1.边框（border）；有三部分组成；边框宽度，边框样式，边框颜色
语法；border：border-width//border-style//border-color；
border-widte：2px；（边框的宽度）
border-style：；（none【默认没有边框】// solid【实线边框】//dotted【点线边框】// dashed【虚线边框】）
border-color：red；（边框颜色）
符合写法；border：2px solid red；（设置一个宽度是2px，颜色是红色的实线边框）
上边框；border-top：2px solid red；

表格边框；border-collapse：collapse；（表示相邻边框合并在一起）

2.内边距；（padding）设置内容与边框之间的距离【会影响盒子的实际大小】
padding-left：2px；距离左内边距2px

3.外边距；（margin）控制盒子鱼盒子之间的距离
margin-top：2px；距离上面盒子的距离是2px

让块级盒子水平居中（margin：0px auto；）；条件；盒子必须要指定宽度// 盒子的左右外边距都设为auto

嵌套块元素垂直外边距的塌陷；对于两个嵌套关系（父子关系）的快元素，父元素有外边距同时子元素也有外边距，此时父元素会塌陷较大的外边距值
解决方案【为父元素定义一个上边框//添加overflow:hidden;】

4.清楚内外边距；
*{margin:0px; padding:0px;}[]

5.圆角边框；
语法；border-radius：2px；（如果设置为50%则会是一个园 // 也可以设置四个值分别对不同的角设置圆角）

6.盒子阴影；
语法；box-shadow：h-shadow【水平阴影的位置】 v-shadow【垂直阴影的位置】 blur【模糊距离】 color【阴影颜色】；

7.文字阴影；
语法；text-shadow：h-shadow【水平阴影的位置】 v-shadow【垂直阴影的位置】 blur【模糊距离】 color【阴影颜色】；

九。浮动float【作用；能够将块级元素转换为行内快元素】（如果一个盒子添加了浮动则盒子原先的位置就不需要存在了，也会覆盖其他的盒子）
语法；float：left；
主意；如果一个盒子浮动则同级盒子也应该浮动，，不然会两个盒子重在一起//如果添加了浮动则父盒子可以不加高度

2.清楚浮动；
本质；清除浮动元素造成的影响//如果父盒子有了高度则不需要清楚浮动//清除浮动之后父级会自动更具浮动盒子自动检测高度这样就不会影响下面的标准流了
清除浮动的方法；
a。父级元素添加overflow属性【overflow:hidden;】
b。父级添加after伪元素
c。父级添加双伪元素
d。额外标签法（在浮动元素的末尾添加一个空标签【列如；<div style=" clear.both"></div>】）

十，定位（定位可以让盒子在某个盒子里自由移动或者固定在屏幕中的某一个位置，并且可以压住盒子）
1.定位的组成；定位模式+边偏移
语法；position：relatic【相对定位】//absolute【结队定位】//fixed【固定定位】；

列如；position:relatic; top:10px; left:10px;【表示添加了相对定位，定在距离左边框10px，上边框10px】
主意；如果没有父元素或者父元素没有相对定位，那么将以主页来定位

2.定位的叠放次序；
z-index:1;数值越大就在最上面
盒子居中；先利用定位进行定位在利用margin-left：-20px；和margin-top：-10px；就能把盒子移动到居中了

十一，元素的显示与隐藏
1.display：none【隐藏对象，不在占用原先的位置】//block【能够显示元素】；

2.visibility：visible【元素可视】//hidden【元素隐藏】（隐藏元素后继续占有原来的位置）；

3.overflow：visible【不减缺内容也不添加滚动条】//hidden【不显示超出对象的内容，超出部分隐藏掉】//auto【内容超出显示滚动条】；

十二。精灵图
核心原理；将网页中一些小背景图像整合到一张大图中，这样服务器就只需要调用一次请求，提高页面的加载速度了
【精灵技术主要针对与背景图的使用利用background-position:x y;定义背景图的位置】

十三，字体图标【展示的是图标不是字体】
1，字体图标下载【http：//icofont.cn】
2，字体图标引入（引入到HTML页面中//放到同一文件夹中才能引用//先将css文件夹中的文件引入到style里面，再把图标的特殊符号引用到body中）
3，字体图标的追加（以后添加新的小图标）
4.在要添加图标的标签里面添加 class="iconfont **" iconfont必须要有，后面是要使用那个图标就添加那个图标的类名，一般在官网有

十四，css的三角
做法；{width:0px; hright:0px; border:10px solid transparent; border-left-color:red;}
【这样先将边框宽度改为10px，实线，没有颜色 /在设置其中一边的颜色就能够制造出三角了//三角的大小曲解于边框的宽度】

十五，用户界面鼠标样式
1.鼠标样式；
cursor：default【默认】/pointer【小手】/not-allowed【禁止】；

2，图片与文字的垂直对齐
语法；vertical-align：top【把元素的顶端与行中最高元素对齐】/middle【把此元素放在父元素中部】/bottle【把元素顶端与行内最低元素的顶端对齐】；

3.溢出字体用省略号代替
语法；a。单行文字；white-space：nowrap【先强制一行内显示文本】； overflow：hidden；【超出部分隐藏】 text-overflow：ellipsis【用省略号代替超出的部分文字】；

4.文字环绕；【只需要将图片设置为浮动文字就会环绕图片了】

十六。css3的新特性
1.新属性选择器
列如；E[att]表示选择具有att属性的E元素
E[att=“val”]表示选择具有att属性却属性值是val的E元素

2.结构伪类选择器
E：first-child【选择父元素中第一个子元素】
E：last-child【选择父元素中最后一个子元素】
E：nth-child（n）【选择父元素中第n个子元素】{n可以是公式也可以是even（偶数）odd（奇数）}

3.伪元素选择器
：：before【在元素内部内容的前面插入内容】
：：after【在元素内部内容的后面插入内容】

语法；element：：before{content：；【必须要有】 }

4.图片模糊处理
语法；filter：blur（5px）；【数值越大模糊越明显】

5.过渡【是从一个状态渐渐的过渡到另外一个状态//经常和：hover一起搭配使用】
语法；transition：要过度的属性花费时间运动曲线何时开始；
属性【想要变化的css属性，高度，宽度，背景颜色，】时间【以秒为单位】
口诀；谁做过度给谁加
列如；div{transition:width 0.5s ，height 0.5;}
div:hover{width:200px;}【单鼠标经过盒子是盒子的宽度变为200px，总时间是0.5s】

注意【如果想要写多个属性则可以用逗号分隔】【也可以直接使用all】
列如div{transition:all 0.5s } div:hover{width:100px; height:100px;}[这样两个属性都能变化]

6.2D的转换【transform：translate（移动） rotate（旋转） scale（缩放）；】
语法；translate（x，y）//translateY(N)//translateX（n）
注意【不会影响其他元素的位置//对行内标签没有效果】
语法；rotate（度数deg）【正值是顺时针旋转，负值时逆时针旋转】
语法；scale（2，2）【修改宽度，高度都是原来的两倍】，第一个是宽度缩放倍数，，如果只要一个数，则表示宽度和高度的缩放倍数一样

7.动画
语法；animation: name【动画的名字】 5s【动画总时长】 linear【匀速运动】 2s【2s后开始】 infinite【无限次数播放】 ;
@keyframes name【动画名字】{form{0%} to{100%}}

8.3D转换
语法；translform：translateX（100px）；【仅仅在x轴上移动】
translform：translateY（100px）；【仅仅在Y轴上移动】
translform：translateZ（100px）；【仅仅在X轴上移动】
translform：translate3d（x，y，z）；【其中x，y，z分别值要移动的轴方向的距离】

透视；
perspective：500px；【透视写在被观察元素的父盒子里面//数据越小透视效果越好】

旋转
translform：rotate3d（xdeg，ydeg，zdeg）；

3D呈现
transfrom-style：preserve-3d；【写在被观察元素的父盒子里面//保留3D空间】

9.视口
meta【让网页的宽度等于手机屏幕的宽度】
语法；<meta name="viewport" content="width=device-width , user-scalable=no , initial-scale=1 , maximum-scale=1 , minimum-scale=1">
initial-scale【初始缩放比】
maximum-scale【最大缩放比】
minimum-scale【最小缩放比】
user-scalable【用户是否可以缩放//yes或no】

十七，移动端常见的布局
1.流式布局
max-width【最大宽度】
min-width【最小宽度】
注意：盒子高度写死，宽度适应，
小图片，小图标，文字大小一般要写死
大图片一般宽度自适应，高度等比列缩放
#a{
   width: 100%;//宽度最大是1200px，最小是400px
   max-width: 1200px;
   min-width: 400px;
   height: 500px;
}
.a{
   width: 80%;最大宽度是1200px*80% ，最小宽度是400px*80%
   height: 50%;高度是500px*50%
   background-color: #00FFFF;
}

2.flex布局【弹性布局】
语法；display：flex；
给父元素添加的属性
flex-direction：row【默认从左到右】；column【y轴是主轴】
justify-content：flex-start【默认从头开始】；center【在主轴居中对齐】 space-around【平分剩余空间】space-between【先两边贴边在平分剩余空间】
flex-wrap：onwrap【默认不换行】；wrap【换行】
align-content：【设置侧轴的子元素排列方式】默认从上到下；center【在主轴居中对齐】 space-around【平分剩余空间】space-between【先两边贴边在平分剩余空间】
align-items：默认平均；center【【垂直居中】
flex-flow：row wrap；【相当于同时设置了flex-direction和flex-wrape】

给子元素添加的属性
flex：1；【平分剩余的空间//1是父元素的空间只平均分一份//2是空间平均分成两份//父元素必须有display：flex；】
align-self：auto【默认值】；
order：0；【定义项目的排列顺序//数值越小，排列越靠前】

3.rem布局【rem是一个单位】
rem的优点是可以修改HTML里面文字大小来改变页面元素的大小可以控制整体
【rem的是相对于html元素的字体大小】屏幕尺寸/15=html页面中文字大小px
媒体查询+rem实现元素变化实现元素文字大小变化；【
@media screen and （min-width：400px；）{
html{font-size：14px；}
}

】

4.响应式布局
媒体查询【@media可以针对不同的屏幕尺寸设置不同的样式】
语法：@media mediatype and|not|noly (media feature){css-code;}
mediatype【all；用于所有设备//scree；用于电脑屏幕，平板电脑，智能手机（使用最多）】

列如；
@media screen and（max-width：800px；）{css样式}
引入资源；【<link rel="stylesheet" href="a1.css" media="screen and (min-width:400px;)">】{如果浏览器宽度大于400px就调用这一个a1.css样式}
@media screen and (max-width:800px) and (min-width:201px){
body{
color: pink;
background-color: aqua;
}
}
@media screen and (max-width:500px) {
body{
background-color: bisque;
}
}
@media screen and (min-width:801px){
body{background-color: blueviolet;}
}