百行详解:CSS盒子模型加选择器

最新推荐文章于 2024-06-19 16:48:21 发布

卑微-程序员

最新推荐文章于 2024-06-19 16:48:21 发布

阅读量224

点赞数 1

分类专栏：前端小项目文章标签： css html html5

本文链接：https://blog.csdn.net/UNknowmer/article/details/116461950

版权

前端小项目专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

CSS

css用于美化html页面,称为层叠样式表;
可以不将css单独拿出来,而是写在html的head标签,标签名之中;

<head>
	<style type="text/css">
		选择器{属性:属性值;}
	</style>
</head>

<标签名 style="属性:属性值;">内容</标签名>

而将css单独拿出来,作为外部样式表的时候,我们需要在html中引入一个外部文件;

<head>
	<link href="css路径" rel="stylesheet"/>
</head>

CSS字体属性

css字体属性:
font-size:字号大小,用于设置字号,常用单位是px;
font-family:字体,常用SimSun(宋体),Microsoft YaHei(微软雅黑);
font-weight:字体粗细,后可接100~900,400(normal),700(bold),(bolder),(lighter);
font-style:字体风格,normal默认,italic斜体,oblique倾斜;

选择器{font:font-style font-weight,font-size/line-height font-family}

上面的line-height是设定行间距;
颜色设定可以使用color,后面除了跟颜色还可以跟rgb代码;
text-align:设定文本水平对齐,left左对齐,right右对齐,center居中对齐;
text-indent:首行缩进,1em就是一个字的宽度;
text-decoration:给链接修改装饰效果,none是默认文本,underline是下划线,overline文本上的一条线,line-through定义穿过文本下的一条线;

选择器

标签选择器用标签名作为选择器;

标签名{属性:属性值;}

类选择器使用"."来进行标识,后面跟类名(class=“类名”)

.类名{属性:属性值;}

多类名选择器,各个类名有空格隔开,布局复杂的情况下,可以使用;

<div class="类名 类名"></div>

id选择器,使用#进行标识,后面跟id名;

#id名{属性:属性值;}

通配符选择器,*匹配页面所有元素;

*{属性:属性值;}

交集选择器,由两部分构成,一个是标签选择器,一个是class选择器;

h3.class{color:red;}

并集选择器,各个选择器通过,来连接,其样式完全相同;

.class,h3{color:red;}

后代选择器,也叫包含选择器,用来选择元素活着元素租的后代,把外层标签写在前面,内层标签写在后面,中间用空格隔开;

.class h3{color:red;}

子代选择器,作为某个元素子元素的元素,把父级元素标签写在前面,子级在后面,中间用>连接;

.class>h3{color:red;}

伪类选择器,用于给某些选择器加特殊效果,:link是未访问,:hover是鼠标移动到链接,:active是选定的链接,:visited是已访问的链接;
属性选择器:获取某个属性的;

input[id]{
	color:red;
}
input[type='button']{
	color:green;
}

标签显示模式

块级元素(h1-h6/p/div/ul/li/ol/dl/dd/dt/table/tr/td/caption/form):
1、有默认的宽高，宽是父元素的100%，高度是内容所撑起来的高度;
2、宽高可以设置;
3、独占一行;
4、可以容纳任意的元素（h/p元素不能容纳块状元素);
5、可以设置外边距和内边距的;
行内元素(a、strong、b、em、i、del、s、ins、u、span):
1、有默认的宽高，宽高是内容所撑起来的;
2、宽高设置是无用的;
3、相邻的行内元素或者行内块元素在同一行上显示;
4、只可以容纳行内元素与内容;
5、水平方向上的外边距和内边距可以设置，垂直方向设置无用;
行内块元素(img、input、label、select、option):
1、有默认的宽高，是元素本身的宽高
2、宽高是可以设置的
3、相邻的行内元素或者行内块元素在同一行上显示
4、一般不容纳其他元素
5、外边距和内边距都是可以设置的
标签显示模式转换:
块转行内:display:inline;
行内转块:display:block;
块,行内元素转行内块:display:inline-block;

背景

background-color是背景颜色;
background-image是背景图片,后跟url是使用绝对或者相对地址的图片;
background-repeat:repeat|no-repeat|repeat-x|repeat-y,第一个是默认平铺,第二个是不平铺,第三个是向上平铺,第四个是纵向平铺;
background-position:是背景位置,可以加length,position,前者是百分数,后者是坐标,因为有x和y,所以有两个参数;
background-attachment:背景附着,后加scroll是随着对象滚动,使用fixed图像固定;
background:背景颜色背景图片地址背景平铺背景滚动背景位置;

盒子模型

CSS有三大模型,盒子模型,浮动,定位;
把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局;
边框:
语法：border : border-width || border-style || border-color
边框样式用于定义页面中边框的风格，常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值）;
solid：边框为单实线(最为常用的);
dashed：边框为虚线;
dotted：边框为点线;
double：边框为双实线;
表格的细线边框:
table{ border-collapse:collapse; } collapse单词是合并的意思;
border-collapse:collapse; 表示相邻边框合并在一起;
盒子内边距:
padding属性用于设置内边距。是指边框与内容之间的距离:
padding-top:上内边距;
padding-right:右内边距;
padding-bottom:下内边距;
padding-left:左内边距;
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容;
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距右外边距下外边距左外边

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

section img {  
        width: 200px;/* 插入图片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
        margin-left: 50px; /* 插入当图片也是一个盒子 */
    }
aside {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
    
        background-size: 200px 210px; /*  背景图片更改大小只能用 background-size */
        background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */
    }

使用padding:0;margin:0来清除元素默认内外边距;

卑微-程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
百行详解:CSS盒子模型加选择器

文章目录CSSCSS字体属性选择器标签显示模式背景盒子模型CSScss用于美化html页面,称为层叠样式表;可以不将css单独拿出来,而是写在html的head标签,标签名之中;<head> <style type="text/css"> 选择器{属性:属性值;} </style></head><标签名 style="属性:属性值;">内容</标签名>而将css单独拿出来,作为外部样式表的时候,我们需要在htm
复制链接

扫一扫