什么是css呢?就是一个层叠样式表,对一个元素层叠的套用.对同一个元素对象进行多方面的套用
基本格式： 内部样式表使用style选择器,放在html的内部
css的语法结构非常的简单,使用style标签包裹着元素的值.这个元素是一个对象.可以是一个标题,可以是一个表格,一个文本框
然后大括号里面是属性的相关的值,对对象的样式进行修改
另外,style标签放到哪里都是可以的,也可以有多个,我们习惯于放于head中
键值对之间使用分号来进行连接
键和值之间使用冒号进行连接
行内样式表就是将修饰的属性放到具体的标签的内部.
内部样式表像全局变量,行内样式表像局部变量
所以,行内样式表的优先级是比内部样式表的优先级高的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BTkB3riw-1656758618912)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220326163850517.png)]
上面是同时使用行内样式表和内部样式表的效果.可以看到一个对象是多个样式共同作用的结果
外部样式表就是新建一个css文件,里面是对对象的描述.然后将这个css文件引入到html中,就可以对html中的对象进行修饰了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zvgWzKV-1656758618914)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220326170026110.png)]
需要注意的是,再主html页面中一定要加上link标签.
然后再href属性中填上地址,rel属性就代表样式表
这个link标签一般是放在head标签中的，这种link标签可以存在多个，不冲突
但是要注意有可能外部样式表可能加载不出来.这是因为浏览器再加载html文件的时候,也会从服务器端下载css文件.
但是它只是在第一次下载的时候从内存中下载,之后为了方便以后的访问,浏览器就会将css文件放在缓存中,这样以后访问的时候提取文件就会非常的快.
所以,有时候我们修改外部的css文件的时候可能不会有更新
但是,我们只要按上ctrl f5 就会强制的从内存中读取信息了
还有一种好的方法就是每次更改css表的时候都修改名字,这样浏览器看到是陌生的文件就会从内存中去读取了
代码风格 样式格式 紧凑格式就是所有的空格和换行全部都省略的情况.
这一点对于开发的时候是不会用的,但是对于部署阶段我们一般就得这样用,
因为,网页在运行的时候是需要下载css代码的,代码越长,占用的网络带宽就越大,时间就越长.
所以,这种格式还是有很大的作用的
展开格式这个方式就是我们现在正常写代码的方式了,将代码展开,方便去阅读
命名格式是采用脊柱命名法就是font-size这样,中间使用一个-来进行连接
选择器 基础选择器 标签选择器就是我们之前写的根据元素是什么样子的
这样会对所有的p标签全部设置
类选择器在css中的类和以往的类都是不一样的,这个类不是面向对象的类,只是一个分类而已
类的表示方法:
用.开头+类的名字{
属性=值
}
下面是一个类的具体例子:
.class1{
color: red;
}
然后将想要是标记为class1类的对象加入加入到相应的属性中
test my outer css hh ss ss xx aa红色的就是被标记的
一个类可以标记多个对象,一个对象也可以被多个类所标记
xx类名和类名之间使用空格分开
如果这两个选择器中有相同的属性值，则该属性值先被改为.user中的值，再被改为.login中的值，即重复的属性以最后一个选择器中的属性值为准。
另外,每一个类选择器必须是和基础选择器在同一个style中的.这个类选择器只可以去修饰基础选择器中的标签,不可以去选择别的
id选择器#由于每一个对象都是有唯一一个独一无二的id,所以使用id选择器就可以只对一个对象进行选中.
这就和类选择器有了区分,毕竟类选择 器可以一对多,多对多呢
id选择器的格式
创建id选择器的时候都是#+id名
#createid{
color: rgb(79, 238, 16);;
}
ss通配符选择器*
将所有的对象都选中,不需要指定,通常是为了消除浏览器的默认配置
复合选择器将所有的选择器全部都结合起来
后代选择器选中后代,可以是子类,也可以是孙子,等等
这样就可以对选中一些子类中的某些元素了
Document
- css1
- css2
-
hhhhh
这样选择的就更加的准确了
另外后代选择器可以是任意选择器的组合.前面我们是一标签为实例演示的,选了一个标签下面的子标签.同样的,我们也可以根据类选择器,id选择器,来选择相应的类和id下面的子标签
Document
- css1
- css2
-
hhhhh
和后代选择器是一样的,但是只可以选用子类,不可以选用孙子类
格式:
元素1>元素2{
属性:值;
}
.classUL>div {
color: red;
}
只有子类可以被选中,孙子类不可以被选中
- css1
- css2
-
hhhhh
并集选择器可以对多个标签进行选择,使用逗号进行连接
并且其他的选择器也可以被选择
- css1
- css2
-
hhhhh
-
ppppp
就是可以同时选中多个标签
最好每一个对象独自占一行
好处就是实现了代码的复用,更加的方便了
伪类选择器: 链接伪类选择器主要是针对a标签使用的
主要是一些状态的改变,使用:来表示状态
:link 表示还没有访问过
:visited 表示已经访问过
:hover 表示鼠标没有点上去,只是悬停
:active 表示鼠标点中了,但是没有收手
下面就用一个链接来演示一下:
同时,不仅仅是a标签有上面的状态,对于其他的标签来说:hover和active也是可以用的
下面就以button来演示一下吧
input:hover{
color: rgb(121, 106, 204);
}
input:active{
color: rgb(22, 11, 11);
}
这样也是可以的
焦点伪类选择器这个就是我们当前选中的元素就是焦点。当我们对焦点进行操作的时候，焦点和别的元素有区别。
尤其是针对输入框，当我们对焦点输入框输入的时候，可以有明显的区别
当我们加入了焦点以后
input:focus{
color: rgb(233, 96, 96);
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1hMGzpcg-1656758618914)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220327170447630.png)]
CSS的属性CSS 参考手册 (w3school.com.cn)
字体的属性 字体的样式font-family
请填写姓名
font-famly属性可以被子类从父类继承的,所以虽然style中写的是body标签,但是span标签也是可以继承这个标签的.
但是像这种input标签好像还不太可以
input标签必须手动在对input进行标记
`
请填写姓名
字体的大小font-size
字体的粗细font-weight
粗细可以写单词也可以写数字
normal正常---------------400
bold粗的-------------------700
bolder更粗的
lighter细的
数字在100~900之间
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5PUivBIX-1656758618915)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220327181411971.png)]
字体的倾斜font-style不倾斜:normal
倾斜:italic
文本属性 文本颜色color请填写姓名
现在我们有必要去介绍一下计算机中的三原色
和我们现实生活中的红黄蓝不同
计算机中的三原色是光三原色:红,绿,蓝,也统称为RGB
计算机中为了描述RGB就给每一个颜色开辟了1个字节,8个bit
所以红绿蓝的范围都是0~255
其中:
255,0,0是红色,
0,2550是绿色
0,0,255是蓝色
0,0,0是黑色
255,255,255是白色
表示方式:
color:red;
color:rgb(255,0,0);
color:#ff0000;
请填写姓名
另外除了rgb以外,还有一个rgba
这里的a是透明度
a也是分配了一个字节0255,但是我们一般都是在01之间使用
1是不透明
0是全透明(也就是没了)
color: rgba(245,87,117,0.5);
下面是0.5的效果
表示透明度还有一种方法就是使用opacity，这个和rgba的区别就是opacity是被可以被子元素继承的，但是rgba是不可以被子元素继承，只可以作用于当前的元素
文本对齐text-aligncenter中间
left左边
right右边
一个链接文本装饰text-decoration
hhh
请填写姓名.center{ text-align: center; } .left{ text-align: left; } .right{ text-align: right; }
hhhhhhhh hhhhhhhhhh ffffffff fffffffffnone消除下划线
underline下划线
overline上划线
over-through穿过
但是,这个none主要是为例消除a链接的下划线来使用的
一个链接文本缩进text-indent
对文本进行首行缩进，缩进也可以是负数
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt earum, quaerat delectus quia mollitia neque, a ullam exercitationem cum eligendi nostrum consequatur dicta dolores perspiciatis tempora, odit blanditiis fugit dolorem.
字体大小是50px
indent就是100px的意思是空出两个字的位置，这个em在不同的单位下是不一样的
2em也是空出两个50px的意思.
em也是一个单位,和px的大小有关
行高line-height行高就是：上边距+字体大小+下边据
如果行高是100px，字体大小是50px，那么上下边据都是25px
写的方式：
- 直接写行间距100px
- 写字母:normal
- 写小数:1.5 表示行间距是字体大小的1.5倍
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt earum, quaerat delectus quia mollitia neque, a ullam exercitationem cum eligendi nostrum consequatur dicta dolores perspiciatis tempora, odit blanditiis fugit dolorem.
对于单行来说:行高和父元素的高读相同就可以实现垂直方向上居中对齐的效果
这很容易去理解,如果行高和父元素的高度相同,上下间距是相同的,所以元素就在中间
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt earum, quaerat delectus quia mollitia neque, a ullam exercitationem cum eligendi nostrum consequatur dicta dolores perspiciatis tempora, odit blanditiis fugit dolorem.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B2m9z2XY-1656758618916)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220329085059760.png)]
背景颜色background-colorbackground-color的属性和color是一模一样的.
只是多加了一个叫做transparent的颜色,意思是和parent的颜色是相同的
背景图片background-imagecolor redcolor bluecolor transparent
我们不光可以设置背景颜色,还可以设置背景图片
格式:
background-image: url(../image/Moon.jpg);
注意:
url不要忘记写
url里面可以没有网页
路径可以写相对路径
平铺background-repeat欢迎来到我的个人博客
平铺:repeat
不平铺:no-repeat
水平平铺:repeat-x
垂直平铺:repeat-y
平铺就是像上面那样的,不平铺就是只有一张图片
图片和颜色是可以同时存在的,但是图片在颜色的上面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Z7WBptM-1656758618916)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220329102343173.png)]
上面就是不平铺然后再加上背景颜色的情况
位置background-position欢迎来到我的个人博客
也是对背景图片来说的,背景图片有一下几个位置
background-position:x y;
对位置有以下的改变:
名词方位:center,left,right,top,bottom
精确方位:坐标或百分比
混合方位:同时含有名词方位和精确方位
如果只是写了一个数字或者是方位,那么就默认就是x的坐标,另外的y坐标默认是center
两个都是方位名称的时候,俩个并不需要顺序
大小background-size属性的值可以是下面的几种：
数字 x y 代表长和宽的大小
background-size: 2000px 600px;
使用百分比
代表是原图像的百分之多少
background-size: 50% 50%;
使用cover:使图片完全的铺满整个图片的大小,不会有留白
使用contain:使图片的尺寸最大,可能会没有留白
下面的这个就是使用contain
下面的这个就是使用cover,布满全局
半角矩形border-radius格式:
圆型
可以是数字100px
border-radius: 100px;
可以是百分比
相当于半径是长度的百分比
如果长和宽是相同的,那么border-radius=50%,就可以达到圆形了
椭圆.circle{ height: 400px; width: 400px; background-color: bisque; background-position: left; background-size: cover; border-radius: 50%;//长和宽的长度相同的时候就可以呈圆形了 }
如果长度和宽度不相同的话,boder-radius是50%的话,就是一个椭圆:
.circle{
height: 400px;
width: 800px;
background-color: bisque;
background-position: left;
background-size: cover;
border-radius: 50%;
}
按钮
另外,如果半径的长度是一个矩形的宽度的一般,就是一个按钮
自定义还可以分别对四个角进行不同的圆弧设定
是按照顺时针的方向进行的,上左,上右,下右,下左
border-radius:100px 0px 100px 0px;元素的显示模式 块级元素
就是一个元素占一行的就是块级元素.
常见的
行内元素p
h1~h6
div
ul
ol
li
span
a
img既不是行内元素,也不是块级元素
块级元素的子元素可以继承父级元素的高度和宽度,如果自己不修改的话
块级元素可以修改高度和宽度,但是行内元素不可以修改宽度和高度,只能和文字的大小有关
块级元素里面可以包含块级元素和行内元素;
但是行内元素不可以包含别的其他的元素了.这也很好理解,毕竟都是文字还能包含什么呢
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-di6kVj0n-1656758618917)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220404222300324.png)]
上面的就是块内元素里面可以有块内元素,块内元素的性质可以更改
行内元素可以转为行内元素child1child2
使用display的block块
https://blog.csdn.net/weixin_51574797/article/details/链接1 https://blog.csdn.net/weixin_51574797/article/details/链接2 https://blog.csdn.net/weixin_51574797/article/details/链接3 https://blog.csdn.net/weixin_51574797/article/details/链接4将行内元素转为行内块元素
https://blog.csdn.net/weixin_51574797/article/details/链接1 https://blog.csdn.net/weixin_51574797/article/details/链接2 https://blog.csdn.net/weixin_51574797/article/details/链接3 https://blog.csdn.net/weixin_51574797/article/details/链接4行内元素可以设为none
将display中的属性设为none,就可以使行内元素隐藏，在屏幕上是不显示的
盒模型 边框borderborder-width
border-color
border-style
border-style: outset;
border-color: rgb(98, 190, 155);
border-width: 20px;
当然,这三行可以写在一行里面:
border: outset 20px greenyellow;
有时候会自带边框，所以要消除边框就可以让边框变为none
border:none
四个边框可以不一样
border-top: outset 20px rgb(110, 172, 17);
border-bottom: outset 20px rgb(175, 202, 135);
border-left: outset 20px rgba(27, 233, 171, 0.315);
border-right: outset 20px rgb(161, 211, 226);
另外使用边框会撑大盒子,所以就会让盒子由300*300的变为340 340的,所以盒子就会变大
box-sizing: border-box;
所以就可以加上这个关键字box-sizing来不让盒子变大
内边距padding内边距是内容和边框之间的距离
一般来说,顶着内边框都是比较丑的,我们一般都是留有一点距离
padding-left padding-right padding-top padding-bottom
padding-left: 40px;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9l4qNsaU-1656758618918)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220405134030036.png)]
这样就会在左边留下一些距离
外边距margin[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z7bXGo8A-1656758618918)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220405133450624.png)]
就是盒子和盒子之间的距离就是外边距
margin: 40px 40px 40px 0px;
这个之间就是外边距margin
块级元素水平居中那我们的块级元素就可以使用margin来使得呈现水平居中的效果
让margin-left和margin-right的值是auto即可
去除浏览器和元素之间的空隙margin:0 auto
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
浏览器默认是带有一些空隙的,使用上面的代码就可以去除之间的空隙
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sASbWClt-1656758618919)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220405213042184.png)]
另外,之后再对对象进行叠加样式的话,可以进行覆盖
弹性布局布局一般都是一个元素独立一行,所以我们要是想要将元素都放到一行,就不太好操作
而弹性布局就是为了解决这个的
使用display:flex这条语句就得加到flex-container上面(父元素上面),然后父元素包含的子元素就是flex-item
flex-direction:水平方向是主轴,竖着是侧轴,可以决定flex-item的排布方向,一般都是横着排列的
另外父元素只是决定子元素是flex式分布的,
子元素的子子元素也要想flex分布,那么子元素也要实现这个属性,可以嵌套使用
就可以让元素从单独占据一行,变成都在一行
我的简历
我的网页
我的网页
逆光之影
使用stretch
1 1 1
就会铺满整个父亲节点的长度
还有flex-end是在最下面,flex-start是在最上面
常用的就是上面的那几种属性的值了
overflow在一个元素的css属性中加入这个就可以使浏览器滑动的时候，移动的是当前的元素内容
overflow：auto；
