基本选择器的简单介绍、font系列、text系列、颜色表示方法、长度单位、盒模型的基本介绍

最新推荐文章于 2021-11-22 09:30:40 发布

琴～～

最新推荐文章于 2021-11-22 09:30:40 发布

阅读量1.7k

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/109147024

版权

一、基本选择器

1、类选择器 : 通过标签的class属性选择标签

.box{ … }（需要写在style里面，里面的属性可以包括：字体的颜色，字体大小，文字字体、字体的粗细-------其中400为正常粗细/大于400为加粗bold等；各种边框的设置，例如：宽、高、边框的颜色、等；）

{

}

2、标签选择器：通过标签的名称选择标签

div{ … }

p{ … }

｛

}

3、通配符选择器：选择所有标签

通常用来去除标签自带的内外边距

*{ … }

margin:0px; （设置盒子和页面之间的距离）

padding:0px;(设置里面内容和盒子之间的距离)

}

4、ID选择器

id属性命名规则：

(1)可以包含数字、字母、下划线、连字符;

(2)不能以数字开头;

(3)id具有唯一性，一个id名称只能使用一次;

(4)一个标签只能有一个id名称;

#box{ … }

{

}

二、font系列

字体存在的意思和必要性：一个杂乱无章的网页会让人枯燥乏味的感觉，而一个美观大方的网页则会让人忍不住多看几眼，而这种美观大方的效果都是使用css字体的样式实线的。css3为控制文字的字体提供了大量的属性，这些属性主要用于控制文本的字体、颜色、修饰等外观。

1、字体大小 font-size

font-size属性用于控制文字字体的大小，此处的文字大小可以是相对的文字大小，也可以绝对的文字大小。我们可以通过数值定义字体的大小，例如：“font-size:14px”,定义字体大小为14px。此外，还可以通过其他的属性值定义字体大小，如下表所示：

font-size的其他属性值

属性值	说明
xx-small	绝对字体的尺寸，根据对象的字体进行调整，最小
x-small	绝对字体尺寸，根据对象字体进行调整，较小
small	绝对字体尺寸，根据对象的字体进行调整，小
medium	默认值，绝对字体尺寸，根据对象字体进行调整，正常
large	绝对字体尺寸，根据对象字体进行调整，大
x-large	绝对字体尺寸，根据对象字体进行调整，较大
xx-large	绝对字体尺寸，根据对象字体进行调整，最大
larger	相对字体尺寸，根绝父元素中字体的尺寸进行相对增大，使用成比例的em单位
smaller	相对字体尺寸，根绝父元素中字体的尺寸进行相对缩小，使用成比例的em单位
length	百分数或由浮点数和单位标识符组成的长度值，不可为负值，其百分比取值基于父元素中字体的尺寸
inherit	继承父元素字体的大小

应用代码如下：

父级元素的大小

最小

<p class="samll">
    较小
</p>
<p  class="medium">
    正常
</p>
<p class="large">
    大
</p>
<p class="x-large">
    较大
</p>
<p class="xx-large">
    最大
</p>

font-size: 30px;

font-size: 100%;

2、字体加粗 font-weight

font-weight通过设置字体的粗细，可以让文字的显示不同的外观，css3的font-weight属性可以定义字体的粗细程度，其属性值有14个，如下边所示:

font-weight的属性值

值	说明
normal	默认值，定义标准的字符
bold	定义粗体的字符
bolder	定义更粗的字符
lighter	定义更细的字符
100-900（整百递增）	共9个数值，定义由细到粗的字符。400等于normal,而700等于bold
inherit	规定从父元素继承字体的粗细

font-weight:bold;加粗

font-weight:normal;正常

3、字体风格 font-style

font-style定义字体的风格，即字体的显示样式。其属性值有4个，如下表：

font-style的属性值

属性值	说明
normal	默认值。浏览器会显示一个比较标准的字体样式
italic	浏览器会显示一个斜体的字体样式
oblique	浏览器会显示一个倾斜的字体样式
inherit	规定从父元素继承字体样式

font-style的应用的代码如下所示：

<p class="italic">
    宝剑锋从磨砺出
</p>

<p class="normal">
    梅花香自苦寒来
</p>

<p class="oblique">
    少壮不经勤学苦
</p>

 
<div>
    <p class="inherit">
        老来方悔读书迟
    </p>
</div>

font-style:italic; 斜体

font-style:normal; 正常

4、字体族类 font-family

font-family属性用于指定文字的字体类型，例如：宋体、黑体、微软雅黑等，即在网页中展示字体不同的形状。因为字体需要浏览器内嵌字体的支持，该属性可以设置多个显示字体，浏览器按照多个字体依次搜索，以优先找到的字体来显示文字。多个属性值之间以英文逗号隔开。具体的语法格式如下：

{font-family:name};
{font-family:cursive|fantasy|monospace|serif|sans-serif}

从语法看，font-family有两种声明方式。第一种是css3中比较常用。第2中方式使用所列出的字体序列名称，如果使用fantasy序列，将提供默认字体序列。

当font-family属性值中的字体类型由多个字符串和空格组成时（如Microsoft YaHei）,需要使用双引号引起来，如p{font-family:“Microsoft YaHei）”}

font-family: “宋体”; font-family: “微软雅黑”;

font-family: “Microsoft YaHei”;

font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;

5、行高 line-height

行高指的是文字高度加上前后的空白空间的总高度，行高越大，行间距越大

line-height:2; // 只写数字不带单位表示font-size的倍数

line-height:40px;

●单行文本垂直居中：把行高设置为盒子的高度值

6、简写 font （字体的复合属性）

在设计网页时，为了使网页布局合理且文本规范，对字体设计需要使用多种属性，例如：定义文本的粗细、大小、字体。但是分别书写多个属性相对比较麻烦，css3样式表提供的font属性解决了这个问题。

font属性中的属性的顺序排列是font-style/font-variant/font-weight/font-size/font-family,各属性的属性值之间使用空格隔开，需要注意当font-family属性要定义多个属性值的时候，则需要使用英文逗号隔开。

在属性的排列中，font-style/font-variant/font-weight这三个属性值是可以自由换位置的，也可以省略不写。而font-size、font-family则是必须按照规定的顺序出现，如果这两个属性值的顺序不对或者缺少一个，那么整条样式规则可能会被忽略。

<style>
p{font:bold 16px/26px "Microsoft YaHei";
}
</style>
</head>
<body>
<p>宝剑锋从磨砺出</p>
<p>梅花香自苦寒来</p>
<p>少壮不努力老大徒伤悲</p>
<p>老来方悔读书迟</p>
</body>

font:italic bold 30px/2 “宋体”; //按照字体风格，字体加粗，字体大小，行高，字体族类的顺序设置，不能调换位置（在字体大小的后面可以用"/"来追加文本的行高，此属性可以省略。）

font:30px “宋体”; // 可以省略字体风格，字体加粗，行高，至少要包含-----------字体大小和族类。

7、字体的颜色（color）

没有色彩的页面是枯燥乏味的，这就意味着一个优秀的网页设计者不仅需要合理的安排网页的布局，而且还要具有一定的色彩视觉和搭配能力，这样才能够让网页更加丰富多彩。在css3中，color属性用来控制文字颜色，该属性的值可以是任何有效的颜色值，包括字符串类型的颜色名、十六进制的颜色值，或者使用rgb（）函数设置的RGB值，甚至包括css3提供的HSL颜色值等。具体表现形式如下表：

字体颜色属性值

属性值	说明
color:name	规定属性值为颜色名称的颜色，如color:red
hex:number	规定属性值为十六进制的颜色，如hex:#ff0000
rgb:number	规定属性值为rgb代码的颜色，如rgb(255,0,0)
inherit	从父元素继承颜色值
hsl:number	规定属性值为HSL代码的颜色，如hsl(0,75%,50%),此为css3新增的颜色表现方式
hsla:number	规定属性值为HSLA代码的颜色，如hsla(20,50%,50%,1),此为css3新增的颜色表现方式
rgba:number	规定属性值为RGBA代码的颜色，如rgba(255,0,0,0.5),此为css3新增的颜色表现方式

color属性的应用代码如下所示：

<style>
p.text1{color:blue:}
p.text2{color:#00ff00;}
p.text3{color:rgb(255,0,0);}
p.text4{color:hsl(280,100%,50%);}
p.text5{color:hsla(280,100%,50%,0.5);}
p.text6{color:rgba(255,0,0,0.5);}
</style>
</head>
<body>
<p class="text1">我是颜色的名称。我的颜色为蓝色</p>
<p class="text2">我是十六进制。我的颜色为绿色</p>
<p class="text3">我是GRB。我的颜色为红色</p>
<p class="text4">我是HSL。我的颜色为紫色</p>
<p class="text5">我是HSLA。我的颜色为紫色，透明度50%，</p>
<p class="text6">我是RGBA。我的颜色为红色，透明度50%</p>  
</body>

三、text系列

1、水平对齐 text-align

根据页面布局的需要，可以设置不同的对齐方式，如标题类文本需要居中对齐。在css3中，通过text-align属性可以设置水平方向上的居中对齐、左对齐、右对齐或者两端对齐等。如下表：

text-align的属性值

属性值	说明
center	定义文本居中对齐
left	定义文本靠左对齐
right	定义文本靠右对齐
justify	定义文本两端对齐
inherit	继承父元素的属性值
start	最后一行在行开头对齐
end	最后一行在行末尾对齐

应用代码如下：

<style>
    div{
        width:200px;
        height:20px;
        border:1px solid red;
    }
    .div1{
        text-align:center;
    }
    .div2{
        text-align:left;
    }
    .div3{
        text-align:right;
    }
</style>
</head>
<body>
    <div class="div1">
        中公教育
    </div>
    <div class="div2">
        中公教育
    </div>
    <div class="div3">
        中公教育
    </div>
</body>

预览效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bFS2ETED-1603011193815)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201017160735144.png)]

text-align:left; 左对齐（文本向左对齐）

text-align:center; 居中对齐（文本居中）

text-align:right; 右对齐（文本向右对齐）

2、首行缩进 text-indent

普通段落首行缩进两个字符表示一个段落的开始，在网页文本编辑中可以通过css的text-indent属性来设定文本块的首行缩进。text-indent的属性值如下：

text-indent的属性值

属性值	说明
length	定义固定的缩进，默认值为0，单位为em或者px
%	定义基于父元素的百分比的缩进
inherit	规定从父元素继承text-indent属性的值

代码示例：

<style>
    div{
        width:400px;
    }</style>
</head>
<body>
    <div style="text-indent:2em;">
        优就业是中公教育IT培训品牌，致力于培养面向互联网领域的高端人才，以学员就业为目的。
    </div>
    <div style="text-indent:5%;">
        优就业为学员量身打造的个性化、差异化就业流程，力保每一位学员不仅能就业，更能优就业。
    </div>
</body>

预览效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9d7QAzi-1603011193818)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201017165629802.png)]

text-indent:2rem;（rem | em:都为相对长度单位）

3、文本修饰 text-decoration

在网页文本的编程中，为了突出某些重点文字，会给文字增加下划线、上划线或删除线效果，从而吸引读者的眼球，告诉读者这段文字很重要。在css3中，可以用text-decoration属性来修饰文本，该属性为页面提供的文本修饰效果有下划线、删除线、闪烁等。text-decoration属性值如下表所示：

text-decoration属性

属性值	说明
none	默认值
underline	定义文本的下划线
blink	定义闪烁文本
overline	定义文本的上划线
line-through	定义文本的删除线
inherit	规定文本继承父元素的属性值

<style>
    .p1{
        text-decoration:underline;
    }
    .p2{
        text-decoration:none;
    }

    .p3{
        text-decoration:line-through;
    }
    .p4{
        text-decoration:overline:
    }
    .p5{
        text-decoration:blink:
    }</style>
</head>
<body>
    <p class="p1">
        中公教育优就业
    </p>
    <p class="p2">
        中公优就业
    </p>
    <p class="p3">
        中公优就业
    </p>
    <p class="p4">
        中公优就业
    </p>
    <p class="p5">
        中公优就业
    </p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YEDBa0Cz-1603011193821)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201017154814631.png)]

text-decoration: none; 去掉修饰

text-decoration: underline; 下划线

text-decoration: line-through; 删除线

text-decoration: overline; 上划线

4、垂直对齐方式

在网页文本的编辑中，不仅需要水平对齐，有时还需要文字垂直对齐，即文字顶部对齐或者底部对齐。在css3中，使用vertical-align属性来定义行内元素的基线相对于该元素所在行的基线垂直对齐。允许负长度值和百分比值使元素在垂直方向上发生变化。而在表格中，这个属性可以设置单元格内容的对齐方式。vertical-align的属性值如下表：

vertical-align的属性值

属性值	说明
baseline	默认，定义元素放在父元素的基线上
sub	定义元素垂直对齐文本的下标
super	定义元素垂直对齐文本的上标
top	定义元素的顶端与行中最高元素的顶端对齐
text-top	定义元素的顶端与父元素字体的顶端对齐
middle	定义该元素在父元素的中部
bottom	把元素的底部与行中最低的元素的底部对齐
text-bottom	把元素的底部与父元素的底部对齐
length	定义元素在行中的固定值
%	可以使用百分比定义元素在行中的位置
inherit	继承父元素的属性值

应用代码如下：

<style>
    div span{font-size:30px;}
    .div1 span{vertical-align:text-bottom;}
    .div2 sapn{vertical-align:bottom;}
    .div3 sapn{vertical-align:sub;}
    .div4 sapn{vertical-align:super;}
    .div5 sapn{vertical-align:top;}
    .div6 sapn{vertical-align:text-top;}
    .div7 sapn{vertical-align:middle;}
    .div8 sapn{vertical-align:baseline;}
    .div9 sapn{vertical-align:10px;}
</style>
</head>
<body>
<div calss="div1">
        中公教育<span>优就业</span>中公教育
    </div>
<div calss="div2">
        中公教育<span>优就业</span>中公教育
    </div>
<div calss="div3">
        中公教育<span>优就业</span>中公教育
    </div>
<div calss="div4">
        中公教育<span>优就业</span>中公教育
    </div>
<div calss="div5">
        中公教育<span>优就业</span>中公教育
    </div>
<div calss="div6">
        中公教育<span>优就业</span>中公教育
    </div>
<div calss="div7">
        中公教育<span>优就业</span>中公教育
    </div>
<div calss="div8">
        中公教育<span>优就业</span>中公教育
    </div>
<div calss="div9">
        中公教育<span>优就业</span>中公教育
    </div>
</body>

5、文本行高（line-height）

在css中，可用line-height属性设置行间距。line-height的属性值如下表：

line-height的属性值

属性值	说明
normal	默认值
number	设置具体的数字，数字和当前字体尺寸相乘的积为间距的值
length	设置固定的行间距
%	根据当前字体尺寸的百分比来设置行间距
inherit	继承父元素的属性值

代码示例：

<style>
    .div1{
        line-height:normal;
    }
    .div2{
        line-height:8;
    }
    .div3{
        line-height:40px;
    }
    .div4{
        line-height:70%;
    }</style>
</head>
<body>
    <div class="div1">
        中公教育
    </div>
    <div class="div2">
        优就业
    </div>
    <div class="div3">
        中公教育
    </div>
    <div class="div4">
        优就业
    </div>
</body>

6、文本高级样式

一些特殊的文本要求（例如文本阴影）会导致文字种类发生变化，如果使用以上所介绍的css3样式进行定义，其结果不会得到正确的显示，这需要特定的css3标记来完成这些要求。

（1）阴影文本（text-shadow）

在显示字体时，有时候会根据需要给文字添加阴影效果并为文字的阴影添加颜色，以增强网页的整体表现力，这时就需要用到css3样式中的text-shadow属性。在css3中该属性又被重新定义，并增加了不透明de 效果。

text-shadow属性的语法为text-shadow:h-shadow v-shadow v-shadow blur color,其属性值如下表：

text-shadow的属性值

属性值	说明
h-shadow	必须，水平阴影的位置，允许负值，属于长度值，单位为px
v-shadow	必须，垂直阴影的位置，允许负值，属于长度值，单位为px
blur	可选，模糊的距离，如省略该属性值，该参数默认为0，代表阴影不向外模糊，属于长度值，单位为px
color	可选，阴影的颜色，当不写颜色时，默认为文字的颜色，属于颜色值

应用代码如下：

<style>
    p{
        font-size:30px;
        font-weight:bold;
        text-shadow:5px 2px #888;
    }</style>
</head>
<body>
    <p>
        阴影文本text-shadow
    </p>
</body>

预览效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K3dew2M5-1603011193824)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201018135733359.png)]

text-shadow属性可以给文字指定多个阴影，且可以给每个阴影设置不同的颜色，指定多个阴影时使用逗号将多个阴影进行分割。如“p{font-size:20px;text-shadow:5px 20px #888,10px 40px #03f,15px 60px #90f}”,预览效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1VTmoAUV-1603011193825)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201018140243936.png)]

（2）溢出文本（text-overflow）

当指定了网页的显示区域宽度，但显示信息太长时，其结果就是信息会撑破指定区域，从而破坏整个网页布局。在css2.0中其属性值被设定为“hidden”时，盒子容纳不下的内容将被隐藏。但如果使用css3中的text-overflow属性，可以在盒的末尾显示一个代表省略号的符号"…"。但是，text-overflow属性只在当盒中的内容在水平方向上超出了盒子的容纳范围时有效。所以要实现溢出时产生省略号的效果还需要定义强制文本在一行内显示（white-space:nowrap）,以及溢出内容为隐藏（overflow:hidden）,只有这样才能显示溢出文本显示省略号的效果。text-overflowde 的属性值如下表：（其语法为text-overflow:clip/ellipsis）

text-overflow的属性值

属性值	说明
clip	不显示省略标记，而是简单的裁切
ellipsis	当对象内文本溢出时显示省略标记“…”

代码如下：

<style>
       .p1{height:30px;
        width:300px;
        font-weight:bold;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;}
       .p2{height:30px;
        width:300px;
        font-weight:bold;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:clip;}
</style>
</head>
<body>
    <p class="p1">
        	前段工程师时那些大型公司都在争抢的高端人才
    </p>
     <p class="p2">
        	前段工程师时那些大型公司都在争抢的高端人才
    </p>
</body>

效果预览：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9LMaKpc9-1603011193828)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201018143542553.png)]

（3）控制换行（word-wrap）

当HTML元素不足以显示它里面的所有文本时，浏览器会自动换行显示所有文本，而浏览器的默认规则是：对于西方的文字，浏览器只会在空格或者连字符的地方进行换行，不会再一个单词的空间换行；而对于中文，浏览器可能在任何一个中文字符后面进行换行。但是当中文中含有标点符号时，浏览器不会让标点符号位于一行文字的行首，通常会将标点符号以及它前面的文字作为一个整体来一换行。

有时候，需要让浏览器在一个单词的中间进行换行，此时可以借助word-wrap属性。其属性值如下表：（语法为word-wrap:normal/break-word）

word-wrap的属性值

属性值	说明
normal	允许内容顶开指定的边界
break-word	内容将在边界进行换行，如果需要，词内换行（word-break）也会发生

代码如下：

<style>
    p{
        width:400px;
        line-height:26px;
        border:1px solid #000;
        word-wrap:break-word;
    }</style>
</head>
<body>
    <p>
    互联网高速发展的今天，前端工程师是市场上紧缺的人才，根据某招聘网站，显示数据仅北京地区每天就有9000条前端工程师职位招聘.
    </p>
    <p>
                   wordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrapwordwrap
    </p>
    <p>
    互联网高速发展的今天，前端工程师是市场上紧缺的人才，根据某招聘网站，显示数据仅北京地区每天就有9000条前端工程师职位招聘.
    </p>
</body>

效果预览：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-026Ypv44-1603011193831)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201018151304731.png)]

我们通过上面的示例可以看出，word-wrap属性可以控制换行，当属性值为break-word时将强制换行。但对于较长的英文字符串将不起作用，也就是说brebk-word只控制是否断词，而不是断字符。

（4）字体尺寸控制（font-size-adjust）

有时候，同一页面的文字由于采用了不同的字体种类以及修饰样式，会导致其字体尺寸不一样，整体文字显得杂乱无章，此时就需要font-size-adjust属性进行处理。

font-size-adjust属性可以修改字体种类而保持文字大小不会发生变化，其属性值如下表：（语法格式为font-size-adjust：none/number）

font-size-adjust的属性值

属性值	说明
none	默认值，允许字体序列中的每个字体遵循它自己的尺寸
number	为字体序列中的每一个字体强迫指定同一个尺寸

代码示例：

<style>
    .p1{font-family:"Algerian";font-size:28px;}
     .p2{font-family:"Fort";font-size:28px;}
     .p3{font-family:"Cooper Black";font-size:28px;}
     .p4{font-family:"Algerian";font-size-adjust:1.1;}
     .p5{font-family:"Fort";font-size-adjust:1.1;}
     .p6{font-family:"Cooper Black";font-size-adjust:1.1;}
</style>
</head>
<body>
    <p class="p1">
        font-size-adjust
    </p>
     <p class="p2">
        font-size-adjust
    </p>
     <p class="p3">
        font-size-adjust
    </p>
    <hr>
     <p class="p4">
        font-size-adjust
    </p> <p class="p5">
        font-size-adjust
    </p> <p class="p6">
        font-size-adjust
    </p>
</body>

四、颜色表示法

1、英文单词:

red;blue;green;pink…

2、十六进制颜色:

#RRGGBB #000000(黑) #ffffff(白) #333(灰) #666(灰) #999(灰)

3、rgb(red,green,blue) rgb(0-255,0-255,0-255)

4、rgba(red,green,blue,alpha) rgba(0-255,0-255,0-255,0-1) alpha:透明度，0表示完全透明，1表示不透明，0.X表示半透明

五、长度单位（种类）

px 像素

em 当前标签的字体大小

% 百分比

rem root(根)html标签的font-size

六、盒模型

内容、填充、边框、边界是网页设计中常见的属性，css盒子模型即具备这些属性。我们可以把这四种属性转移到我们日常生活中的盒子模型上来理解，日常生活中所见的盒子是一种能装东西的盒子，也具有这些属性，所以叫做盒子模型。

1、盒子的基本类型

在css3中。display属性用于定义盒的类型。总的来说，css中的盒分为block类型（块元素）与inline类型(行内元素)。例如，div元素属于block类型，span元素属于inline类型。它们最明显的区别是块元素占一行，该元素的高、宽属性可控制，默认宽度与父元素宽度一致，与内容无关。行内元素和其他元素同占一行，宽度和内容有关。

（1）inline-block和inline-table类型

inline-block类型属于block类型盒的一种，但是在显示时它有inline类型盒的特点。inline-block的宽、高可以控制，同时，设置了该属性的元素也可以和其他行元素在一行显示。例如：在div 元素样式代码中将display属性设定为“inline-block”,则div元素在显示时与将div元素的display属性设定为“inline”的显示效果相同。

在css中，每个标签都可以看作是一个盒子，盒子模型由四个部分组成：内容区、内边距、边框、外边距

（2）表格相关盒模型

css3还为display属性提供了如下表相关盒模型。

表格相关属性

属性值	说明
table-caption	将目标HTML组件显示为表格标题
table-cell	将目标HTML组件显示为单元格
table-column	将目标HTML组件显示为表格列
table-column-group	将目标HTML组件显示为表格列组
table-header-group	将目标HTML组件显示为表格头部分
table-footer-group	将目标HTML组件显示为表格页脚部分
table-row	将目标HTML组件显示为一个表格行（类似于）
table-row-group	将目标HTML组件显示为一个或多个行分组（类似于

）

2、内边距通过padding属性设置

表示的是标签的边缘和内容之间的距离

（1）简写属性

padding:50px; /* 四个方向统一 /

padding: 50px 100px; /* 上下 | 左右 */

padding: 50px 100px 150px; /* 上 |左右 |下 /

padding: 50px 100px 150px 200px; /* 上 |右 |下 | 左 */(注意shixi)

（2）分别设置四个方向

padding-top: 50px;

padding-bottom: 100px;

padding-left: 150px;

padding-right: 200px;

padding不支持负值

3、边框通过border属性设置

border: width style color;

例如：border:1px solid black;

（1）border-width:2px; 边框粗细

（2）border-style:solid; 边框风格

-solid 实线

-dashed 虚线

-double 双实线

-dotted 点状线

（3）border-color:red; 边框颜色

（4）border-top:2px solid red; 上边框

border-top-width

border-top-style

border-top-color

border-bottom//下边框

border-left//左边的边框

border-right//右边的边框

（5）去掉边框：border:0/none;

4、外边距通过margin属性设置

（1）简写属性

margin:50px; /* 四个方向统一 */

margin: 50px 100px; /* 上下左右 /

margin: 50px 100px 150px; /* 上左右下 */

margin: 50px 100px 150px 200px; /* 上右下左 */

（定义时需要注意：顺时针进行定义四个方向；）

（2）分别设置四个方向

margin-top: 50px;

margin-bottom: 100px;

margin-left: 150px;

margin-right: 200px;

##margin可以设置负值，可以减少标签的占位

solid black;

（1）border-width:2px; 边框粗细

（2）border-style:solid; 边框风格

-solid 实线

-dashed 虚线

-double 双实线

-dotted 点状线

（3）border-color:red; 边框颜色

（4）border-top:2px solid red; 上边框

border-top-width

border-top-style

border-top-color

border-bottom//下边框

border-left//左边的边框

border-right//右边的边框

（5）去掉边框：border:0/none;

4、外边距通过margin属性设置

（1）简写属性

margin:50px; /* 四个方向统一 */

margin: 50px 100px; /* 上下左右 /

margin: 50px 100px 150px; /* 上左右下 */

margin: 50px 100px 150px 200px; /* 上右下左 */

（定义时需要注意：顺时针进行定义四个方向；）

（2）分别设置四个方向

margin-top: 50px;

margin-bottom: 100px;

margin-left: 150px;

margin-right: 200px;

##margin可以设置负值，可以减少标签的占位

##margin:0 auto; 固定宽度的标签水平方向居中

琴～～

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基本选择器的简单介绍、font系列、text系列、颜色表示方法、长度单位、盒模型的基本介绍

一、基本选择器1、类选择器 : 通过标签的class属性选择标签.box{ … }（需要写在style里面，里面的属性可以包括：字体的颜色，字体大小，文字字体、字体的粗细-------其中400为正常粗细/大于400为加粗bold等；各种边框的设置，例如：宽、高、边框的颜色、等；）{ }2、标签选择器：通过标签的名称选择标签div{ … }p{ … }｛}3、通配符选择器：选择所有标签通常用来去除标签自带的内外边距*{ … }*{ margin:0px;
复制链接

扫一扫