首页 > 其他分享 >CSS学习第三期(新手勿喷)

CSS学习第三期(新手勿喷)

时间:2024-03-13 18:58:20浏览次数:21  
标签:文字 盒子 background 新手 对齐 第三期 选择器 CSS 属性

今天是我第三天学习CSS,今天在昨日的基础之上,学习了关于盒子的CSS属性,以及背景的属性,还有选择器和透明度,浮动,话不多说开始今天的分享。

一。盒子的属性

盒子的属性中有宽,高,背景颜色,文字颜色,文字的粗细,文字的大小,文字的水平对齐,上下和居中,边框的颜色,边框的宽度,还有变宽的线条;

1.1、盒子的宽高

盒子的宽高与html中input标签一样,给其一个数值输入px即可,注意:vscod中px是指像素。

div{
     width:500px;
     height:500px;

}

1.2、盒子的背景颜色

盒子的背景颜色是指一个盒子在页面中显示时的颜色,可以设置许多颜色,首要原则还是要让盒子中的文字或者图片可以凸显出来,一般用的最多的是浅灰色,默认为白色,background-corlor:属性值

1.3、文字的粗细

文字的粗细一般用于凸显比较重要的文字才会应用,和标题所用h1-h6或者段落中的用的加粗的标签作用类似,font-weight:属性值

1.4、文字的大小

文字的大小也是用于用于在阅读过程中引起读者的注意,与文字的粗细起同一个作用,能够将文字变大或缩小,font-size:属性值

1.5、文字的对齐方式

文字的对齐方式有左中右对齐在CSS中叫做水平对齐,还有上中下对齐,其作用用来调整文字在页面中的位置,text-align:属性值;是对齐方式的书写格式,属性值左对齐为left,中间对齐属性值为center,右对齐的属性值为right就是我们之前所学的英语中的方位,是不是很简单呢,注意:上中下的对齐方式所用的属性为line-height:属性值,到这很多不懂的就要问了为什么同样都是调整文字的位置左右对齐和上下对齐所用的不是一个属性呢?

text-align:以值为center为例,当前块级容器里的所有行内元素(包括img)在当前容器中横向居中,所有子块级容器里的所有行内元素在它的直接父容器中居中,不影响块级元素的位置。

line-height:可以用在段落中,改变多行文字之间的行距;把某容器的line-height设置与height相同的值,可以使容器中的一行内容纵向居中,仅限一行内容(不要含<br/>,块级元素前后隐含<br/>),对行内元素(包括img)有效,对块级元素无效,但对块级元素里的行内元素有影响。

这就是两者的区别,所以一定要切记text-align是用来调整文字左中右水平位置挪动的,line-height是用来调整文字纵向移动的,line-height的属性值有:top(上)、center(中)、right(右)三个值。

1.6边框

border是用来调整边框的,边框的宽度是border后面添加像素值,常用的像素值是1px,像素值后面跟的是边框线的线条种类,一共是三种solid是实线,dashed是虚线,double是双线。

二、背景属性

2.1、背景的颜色

背景是指边框线的内的区域,其属性是background-后面添加color等,背景颜色是background-color:属性值。

2.2、背景图片以及url路径

之前的学习我们知道img是指图片,当background-后面跟上image这个单词时就代表了我们需要通过路径找到图片将其添加进入页面之中,其和img属性无任何区别,书写方式为background-image:url(图片路径);

2.3、背景平铺

背景图片默认属性值为no-repeat意思为不平铺,background-position-x:属性值;这是关于背景图片的横向平铺的,纵向平铺只需要将x改为y即可属性值换为纵向的方向单词。

2.4、背景图片的大小

背景图片的大小是background-size和文字大小是一样的,只是将font换为background,写入像素值即可,第一个像素值代表了宽,第二个像素值代表高。切记背景图片的大小要放在background的下面。

三、后代选择器与兄弟选择器和子级选择器

继昨天所学的三个选择器后今日选择器家族又加入三个新的成员后代选择器、子级选择器、兄弟选择器。

后代选择器顾名思义是指在其上一级选择器中通过空格直接进行查找的选择器。

div ul li{


}

如代码中所展示的后代选择器是可以直接进行查找的。

子级选择器是通过一层一层进行查找的。

div>ul>li

子级选择器需要通过div这个标签找到ul然后再找到li。

兄弟选择器用于同级的两个标签,通过一个标签查找相邻的另一个标签。

四、透明度

透明度分为两种,第一种是让颜色透明,内容不会变化,最后一个数字是透明度 0-1之间取值,background: rgba(0, 0, 0, .数值)。

第二种是颜色和内容同时会透明,取值 0-1之间取值opacity: 数值;透明度一般用于比如弹框所用的遮罩,京东等平台的打折或者小说阅读网站中,一般将其用于遮罩效果。

五、浮动

浮动一般用于两个级两个以上的图片或者盒子,float:属性值(left或right),浮动属性使用时会造成塌陷效果,那么怎么将浮动效果清除掉呢,这就需要用到clear属性,clear属性就是用来清除浮动效果的,其属性值有left(左)、right(右)、both(左右浮动全部清除)。

这就是我今天的所有学习内容,希望对各位朋友有所帮助。

标签:文字,盒子,background,新手,对齐,第三期,选择器,CSS,属性
From: https://blog.csdn.net/sww1314521/article/details/136685805

相关文章

  • 震惊!css居然可以这么用!
       如果说html是盖房子,那么css就是装修房子,它可以决定外观、样式、和位置等网页元素。一、css的几种使用方式    1、行内样式    所有标签都自带有style属性,因此给标签加一个style=“样式1:样式1的值;样式2:样式2的值”,如果有多个样式,样式和样式之间......
  • 【图像超分】论文复现:新手入门!Pytorch实现SRCNN,数据预处理、模型训练、测试、评估全流
    文章目录前言1.准备数据集和数据预处理1.1数据集选择1.2数据预处理1.3评估指标PSNR和SSIM1.3.1PSNR1.3.2SSIM2.定义网络结构3.设置参数并训练模型3.1参数设置3.2模型训练4.测试训练好的模型5.用训练好的SRCNN模型超分自己的图像数据6.其他补充6.1特征图......
  • CSS下划线动画
    <template><divclass="home"><h2class="title"><span>FromthemomentIsawyou,myheartbegantobeatinadifferentrhythm.Yoursmileislikearayofsunshinethatwarmsmywor......
  • css 闪烁 左右摆动效果
    代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style></style></head><body><divstyle="display:......
  • 02-CSS
    CascadingStyleSheet层叠样式表CSS是一种描述HTML文档样式的语言CSS描述应该如何显示HTML元素CSS的基本原则是内容与样式相分离CSSSelector标签选择器TagSelector作用于所有标签<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>CSS基础:刘......
  • Tailwind CSS Grid
    今天碰到一个问题,就是工作台,要根据权限来自动显示有权限的模块。一开始是纵向的,导致一些问题,也就是说01,05,09显示一列,02,06显示一列。如果02,06有权限的话,显示的是左边空的,右边显示出来,怪怪的。 现在要让模块02,06,比如还多一个05,模块显示,那么就是02,06,05,按顺序,显示出来,那就是02,06......
  • 学习CSS
                                          基础认知CSS的介绍CSS:全称:CascadingStyleSheets,中文译为:层叠样式表CSS的作用:给页面的HTML标签设置样式                                    基......
  • 最常用的CSS
    补充:书写规范:选择器后面要有空格其他直接看:CSS按钮|菜鸟教程(it028.com)www.it028.com/index.htm CSS使用方式:三种1內部式 2行内式:直接在标签中的style属性中写 3外部样式表:通过link标签引入权重大小很明显,越近权重越大:行内>内部>外部引入 CSS三大特性:层叠......
  • CSS鼠标样式(cursor)
    一、CSScursor基本语法cursor属性是什么:指鼠标指针放在一个元素边界范围内时所呈现的光标形状,它包括问号,小手等形状。使用时可以在任何你想要添加的标签里,插入style="cursor:某属性值",也可以在CSS样式中添加。比如:pointer,小手形状help,帮助形状。cursor的属性值有十几种可选......
  • 规则七:避免css表达式
    当页面动态变化时,对于各种事件,例如改变大小,滚动和鼠标移动。这些都会发送请求进行求值,这样就导致了求值进行的非常繁琐。如何避免:使用一次性表达式:将值设置成为固定值,去除css表达式使用事件处理器:这样可以避免在无关事件发生时对表达式的求值。  ......