浅谈前端三傻（二）-----CSS

最新推荐文章于 2024-07-12 14:38:32 发布

百步穿杨张巍警

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量183

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_45897449/article/details/107115263

版权

CSS层叠样式表

什么是css

css层叠样式表(英文全称：Cascading Style Sheets)是一种用来表HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。简单来说，css就是修改html样式，传说中的美图神器。

css可以写在3个地方：

1.外部样式表

<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" href="css/index.css" />

2.内部样式表

<!-- 内部定义样式 -->
<style>	
    .all{		
        height:300px;		
        width:500px;		
        background:#999;
     }
</style>

3.行内样式表

<!-- html标签内定义样式 -->
<div style="height:300px; width:500px; background:#999;"></div>

css中，只有一种东西：“选择器”。选择器，有3种：
1.标签选择器

<style>
    input{
    
    }
</style>

2.id选择器

<style>
    #id{            

     }
</style>

3.类选择器

<style>
    .class{
    
    }
</style>

三种选择器，除了最开始的符号不一样内容完全相同，都是一个接一个的声明，也就是属性名：属性值;
… …
… …
… …
到这里前端二傻也就基本完事了。。。。。(mmp，这让人怎么写😭)。
其实，css对于初级的选手来说学起来不需要记太多(好吧，这句话是骗你们的🐕)，仅需要记住选择器的概念，还有就是清晰的记忆必会的属性样式。
至于css样式，作为一个后端狗也背不下这么些，只能挑一些重点和大家分享一下。

大致分成九类：

1.字体属性

<body>
    <h2 class="ziti">字体样式</h2>
</body>

<style>
   .ziti{            
   	font-size:100px;  /* 字体大小 */            
   	font-family: '楷体';  /* 字体 */            
   	font-style: italic;  /* 字体倾斜 */            
   	font-weight: 900;   /* 字体粗细 */        
    }    
</style>

在这里插入图片描述
大小表示：px像素，em个字的大小，pt个点的大小。

2.文本属性

1）line-height 行间距

语法：line-height:长度值|百分比；
line-height属性用于设置行间距，就是行与行之间的距离（一行文字的高度），即字符的垂直间距，一般称为行高。
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，写数字表示当前文字的倍数。实际工作中使用最多的是像素px。

2）text-align 水平对齐方式

语法：text-align:left | right | center | justify
相当于html中的align，左中右和根据情况。

3）text-decoration 文本装饰

语法：text-decoration:underline | overline | line-through | blink | none
下划线 | 上划线 | 贯穿线 | 闪烁 | 不改变

4）color 颜色

语法：color:red;
#+6位16进制的数，也可以英文单词（只有16个可以识别）当前文字

… …
在这里插入图片描述
卧槽啦！还有很多，使用的时候直接查看w3school。
附上链接: https://www.w3school.com.cn/index.html.
3.列表属性
1). list-style-type列表样式

语法list-style-type：square | none | disc | circle | decimal …
方块 | 无标记 | 实心圆 | 空心圆 | 数字…

2). list-style-image列表样式(图片)

语法 list-style-image : url(xxx.gif)
url里面放图片的路径，就能显示样式

3). list-style-position列表样式(位置)

语法 list-style-position:inside | outside
inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。| outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

哎。。。前端这种东西真的多。。。。。猛虎落泪呀！

4.浮动属性

float:none|left|right
表示向哪里浮动：没有|左|右
clear:none|left|right|both
表示不能向哪一侧浮动：没有|左|右|都不行（妈的，这个both有啥意义吗！？）

内容不是太多呀。。。。。
在这里插入图片描述

5.尺寸属性

尺寸属性也就是width（宽）height（高），在后面跟上像素，这是对于元素的限定。
例如：

<style>
        img{            
             width: 100px;     /*图片的宽度*/
             height: 100px;    /*图片的高度*/ 
        }    
</style>

6.背景属性

background-color背景颜色
可以使用#十六进制的表达方式，单词，还有个transparent表示透明背景颜色。

body{
       background-color: aquamarine;            
    /* background-color: transparent; */     /*矫情🐕*/               
}

background-image背景图像

body{
            background-image:url("/img/1.png");   /* url图片路径 默认是平铺*/            
            background-repeat:repeat;        /*默认平铺，效果壮观*/
}

background-repeat重复方式

body{
	background-repeat:repeat-x;        /*背景图片水平方向平铺*/
	background-repeat:repeat-y;        /*背景图片垂直方向平铺*/
	background-repeat:no-repeat;        /*背景图片只显示一次*/
	background-repeat:inherit;        /*规定应该从父元素继承background-repeat属性的设置*/
}

background-position图片的起始位置

body{
	background-position：center|right|left|top|bottom；      /*简单的左中右上下*/
	background-position：400px 400px     /*以左上角为原点，分别距离x，y轴的距离*/
	/*也可以使用百分数表示，我觉得像素就挺好*/
}

妈的，心情逐渐暴躁。。。。。

7.盒子属性
这个盒子属性我觉得比较好搞，打开谷歌浏览器，随便一个页面，F12，点击Elements就会看到这个盒子属性。
在这里插入图片描述
四个属性：border边框，padding填充(内边距)，margin边界（外边距），context内容（图上最中间的部分）。

border - ：三个属性width（四个方向不同的宽度）。
color（上右下左的顺序填充颜色）。
style（常用值：none 没有效果，dotted点状边框，dashed虚线边框，solid 实现边框，double双实线边框）。

img{
            width: 100px;            
            height: 100px;            
            border-width: 15px;            
            border-color: aqua red blue greenyellow;            
            border-style: dashed;      
}

在这里插入图片描述

padding - :宽度属性

img{
            width: 100px;            
            height: 100px;           
            border-width: 15px;            
            border-color: aqua red blue greenyellow;            
            border-style: dashed;            
            padding: 10px 20px 50px 100px;       /*顺序是上右下左*/
}

在这里插入图片描述

margin - :宽度属性
和padding类似一个内边距一个外边距。
context 表示内容（爱写些啥写些啥）

8.定位属性

position 属性static，absolute，relative，fixed。

static(默认，没有定位)
absolute（绝对定位），相对于整个页面而言，于上下级的代码块无关
relative（相对定位），上下所有的距离设置，都是相对于上级块。
float（浮动）z-index属性，默认是0，属性为整数正负都可以，谁的值大谁在上面。

9.链接属性

a:link|visited|hover|active

a:link 未访问的链接
a:visited以访问的链接
a:hover鼠标移到连接上
a:active鼠标选中激活链接

（真的浮夸，一个链接搞出这么多东西。。。。）

在这里插入图片描述
不行了，我要去学Java，前端太难了。。。。
哈哈，开个玩笑，学无止尽，掌握越多的技术，才能在这个社会中有一席之地，css写的不全，后续会补充上。
笑傲江湖里的令狐冲说过：有些事情本身我们无法控制，只好控制自己。靠自己，努力做到最好，加油！
在这里插入图片描述

百步穿杨张巍警

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈前端三傻（二）-----CSS

CSS层叠样式表1.什么是csscss层叠样式表(英文全称：Cascading Style Sheets)是一种用来表HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。简单来说，css就是修改html样式，传说中的美图神器。css可以写在3个地方：1.外部样式表<link rel="stylesheet" type="
复制链接

扫一扫