CSS
关注
分享
扫一扫
虾米大王
努力学习
展开
-
边框样式的使用-CSS入门基础（011）
今天我们说说边框样式的内容。在网页中，任何块元素和行内元素都可以设置边框属性。像div、img、table、span都可以设置边框属性的。设置边框一般有三个方面，一是边框的宽度，二是边框的外观，三是边框的颜色。语法：border-width:像素值；border-style:属性值；border-color：颜色值；边框的属性属性 说明border-width 边框的宽度border-style 边框的外观border-color 边框的颜色在对一个元素设置边框时，必须同时设定以上三原创 2021-01-12 17:23:00 · 766 阅读 · 0 评论 -
CSS入门基础-目录
CSS简介-CSS入门基础（001）CSS选择器-CSS入门基础（002）id选择器的使用-CSS入门基础（003）子选择器的使用-CSS入门基础（004）字体样式-CSS入门基础（005）字体颜色的使用-CSS入门基础（006）字体粗细的使用-CSS入门基础（007）文本样式的使用-CSS入门基础（008）文本缩进的使用-CSS入门基础（009）字间距、词间距的使用-CSS入门基础（010）边框样式的使用-...原创 2020-12-26 14:07:42 · 325 阅读 · 1 评论 -
绝对定位-CSS入门基础（025）
今天我们接着分享关于定位布局的内容。绝对定位absolute：当元素的position属性值为absolute时，这个元素就变成了绝对定位的元素，这种方法能够精确地把元素移动到你想要的位置。一个元素变成了绝对定位元素后，就脱离了正常的文档流。语法：position:absolute;top:像素值；bottom:像素值；left：像素值；right：像素值；“position：absolute”，是结合top、bottom、left和...原创 2020-12-26 14:06:53 · 205 阅读 · 0 评论 -
清除浮动-CSS入门基础（024）
今天我们接着分享关于浮动布局的内容。清除浮动clear：在css中，清除浮动是在定义了浮动元素之后设置的。语法：clear:取值；clear属性取值 属性值 说明 left 清除左浮动 right 清除右浮动 both 左右浮动一起清除 一般情况，使用clear属性清除浮动时，很少会“clear：left”或者“clear right”来判断清除左浮动，还是清除右浮动，直接会使用clear：bo...原创 2020-12-26 14:05:43 · 196 阅读 · 0 评论 -
浮动布局-CSS入门基础（023）
今天我们分享关于浮动布局的内容。HTML文档流：在学习浮动布局前，我们先来学习一下什么叫“正常文档流”，深入了解正常文档流，对后面学习浮动布局和定位布局是非常重要的前提。文档流，简单来说，就是元素在页面出现的先后顺序，正常文档流，将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按照从左至右的顺序依次排列。块元素1 行内元素1 行内元素2 行内元素3 块元素2 行内元素5 行内元素5 行内元素6 块元素3 ...原创 2020-12-26 14:04:19 · 293 阅读 · 0 评论 -
CSS盒子模型边框border-CSS入门基础（022）
今天我们接着分享关于盒子模型的内容。边框border：前面的章节，我们已经深入学习了边框的属性。这里就再次强调一下，对于border属性，在实际开发中，我们更习惯使用简介写法。语法：border: 像素值 边框类型 颜色值；示例代码：<html> <head><title>边框</title><styletype="text/css"> #ma...原创 2020-12-26 14:02:36 · 491 阅读 · 0 评论 -
CSS盒子模型-CSS入门基础（021）
今天我们分享关于盒子模型的内容。在HTML入门知识中，我们学习了一个很重要的理论：块元素和行内元素。现在我们介绍一个极其重要的CSS理论：CSS盒子模型。在CSS盒子模型理论中，页面中所有元素都可以看成一个盒子，并且占据着一定的页面空间。一个页面由很多这样的盒子组成，这些盒子之间会相互影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。每个元素都看成一个盒子，盒子模型是由content内容、paddin...原创 2020-12-26 13:59:46 · 353 阅读 · 0 评论 -
表格标题位置-CSS入门基础（020）
今天我们接着分享表格样式的内容。默认情况下，表格标题位置是在表格的上方，但是如果我们想要把表格标题放在表格下方呢？在css中，我们可以使用caption-side属性来定义表格标题的位置。语法：caption-side:属性值；caption-side属性取值 属性值 说明 top 默认值，标题在顶部 bottom 标题在底部 示例代码：<html><head>&...原创 2020-12-26 13:58:12 · 1597 阅读 · 0 评论 -
表格样式的使用-CSS入门基础（019）
今天我们分享关于表格样式的内容。表格内框合并border-collapse：在了解表格内框合并之前，我们先看一下，默认情况下表格的显示效果。示例代码：<html> <head><title>表格表框默认</title><style type="text/css">table,th,td { border: 1px solid black;}</style&g...原创 2020-12-26 13:56:42 · 360 阅读 · 0 评论 -
列表样式的使用-CSS入门基础（018）
今天我们分享关于列表样式的内容。列表项list-sytle-type：在HTML学习中，我们知道有有序列表和无序列表，都是使用type属性来定义的。1、有序列表<ol type="属性值"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol>属性值type：1，数字1、2、3……；a，小写英文字母a...原创 2020-12-18 22:38:34 · 680 阅读 · 1 评论 -
文字环绕的使用-CSS入门基础（017）
今天我们分享关于文字环绕float的内容。在网页布局中，经常会用到图文混排。图文混排，就是文字环绕图片进行布局。在css中，使用浮动属性float可以设置元素的周围。语法：float:取值；float属性取值 属性值 说明 left 元素向左浮动 right 元素向右浮动 默认情况下，元素是不浮动的。上表中的属性是常用的，另外还有“none” 和“inherit”不常用，也不需要学习的。示例代码：...原创 2020-12-18 22:37:09 · 654 阅读 · 1 评论 -
图片样式的使用-CSS入门基础（016）
今天我们分享关于图片样式的内容。在css中，对于图片的大小，我们使用width和height两个属性来定义。语法：width:像素值；height:像素值；示例代码：<html> <head><title>图片大小</title><styletype="text/css"> img { width:100px;height:80px;}...原创 2020-12-18 22:35:56 · 659 阅读 · 1 评论 -
hover伪类的使用-CSS入门基础（015）
今天我们接着分享关于超链接样式的内容。上节我们知道了“a：hover”可以定义鼠标悬停超链接a时的样式。很多初学者都认为hover只限于a标签使用，如果你这样理解，就埋没了css一个功能强大的技巧了。“：hover”伪类是可以定义任何一个元素的鼠标悬停时的样式的。语法：元素：hover {属性：属性值；}元素可以是任意的块元素和行内元素。示例代码：<html><head><title>...原创 2020-12-18 22:34:20 · 2236 阅读 · 1 评论 -
超链接样式的使用-CSS入门基础（014）
今天我们分享关于超链接样式的内容。在浏览器中，超链接的样式有默认样式、点击后样式、鼠标悬停样式和激活样式四种状态。超链接默认情况下是带有下划线的，看起来很丑，用户体验不好，前面我们说到了text-decoration:none可以去除下划线。表示四种访问状态，可以使用超链接的伪类来定义。语法：a:link{属性：属性值}a:visited{属性：属性值}a:hover{属性：属性值}a:actived{属性：属性值}超链接伪类 ...原创 2020-12-18 22:32:55 · 900 阅读 · 1 评论 -
背景样式的使用-CSS入门基础（013）
今天我们分享关于背景样式的内容。在css中，背景样式主要有两种：背景颜色和背景图像。在传统的web 1.0时代中，一般都是使用元素的backgroud属性，来为body、table和td等少数的标签定义背景图像。在web 2.0时代，主要是使用css的background属性来定义。背景图像：背景图像的属性 属性 说明 background-image 定义背景图像的路径 background-repeat 定义背景图像显示方式，如纵向平...原创 2020-12-18 22:31:25 · 359 阅读 · 1 评论 -
局部边框的使用-CSS入门基础（012）
今天我们接着分享边框样式的使用。我们都知道边框有上下左右，四条边，那么如果我们要对其中的某一条边设置，我该怎么办？在css中，我们是可以分别对上下左右的边进行单独的样式设置的。上边框border-top：border-top-width:1px;border-top-style:solid;border-top-color:red;简洁写法：border-top: 1px solid red;下边框border-botto...原创 2020-12-18 22:29:36 · 448 阅读 · 1 评论 -
边框样式的使用-CSS入门基础（011）
今天我们说说边框样式的内容。在网页中，任何块元素和行内元素都可以设置边框属性。像div、img、table、span都可以设置边框属性的。设置边框一般有三个方面，一是边框的宽度，二是边框的外观，三是边框的颜色。语法：border-width:像素值；border-style:属性值；border-color：颜色值；边框的属性 属性 说明 border-width 边框的宽度 border-style 边框的外观 bord...原创 2020-12-18 22:28:09 · 333 阅读 · 1 评论 -
字间距、词间距的使用-CSS入门基础（010）
今天我们接着分享文本样式的内容。letter-spacing字母间距：在css中，我们可以使用letter-spacing属性定义字间距。语法：letter-spacing:像素值；我们一般都是使用像素值为单位的。示例代码：<html> <head><title>letter-spacing</title><style type="text/css"&...原创 2020-12-09 22:27:52 · 3562 阅读 · 0 评论 -
文本缩进的使用-CSS入门基础（009）
今天我们接着分享关于文本样式的内容。font-variant属性：在CSS中，使用font-variant属性只有一个作用，就是把文本设置成小型的小写字母，此属性只针对英文而言。语法：font-variant:normal/small-caps;font-variant属性 属性值 说明 normal 默认值，正常效果 small-caps 小型大写字母 示例代码：<html>...原创 2020-12-09 22:26:46 · 914 阅读 · 0 评论 -
文本样式的使用-CSS入门基础（008）
这一节我们分享关于文本样式的内容。字体样式和文本样式为什么要区分呢？字体样式主要涉及字体本身，而文本样式主要涉及多文字的排版效果，即整个段落文字的排版效果。因此，使用text前缀来区分。CSS文本属性 属性 说明 text-decoration 下划线、删除线、顶划线 text-transform 文本大小写 font-variant 将英文文本转换为小型大写字母 text-indent 段落首行缩进 text-align ...原创 2020-12-09 22:25:16 · 274 阅读 · 0 评论 -
字体粗细的使用-CSS入门基础（007）
今天我们接着分享字体的内容。在css中，我们使用font-weight属性来定义字体粗细。字体的粗细和字体的大小是不一样的，粗细指的是字体的肥瘦，而大小指的是字体的高宽。语法：font-weight：粗细值属性取值有两种，一种是关键字，一种是100~900之间的数值。关键字：font-weight属性取值 属性值 说明 normal 默认值，正常 lighter 较细 bold 较粗 bolder ...原创 2020-12-09 22:24:02 · 1688 阅读 · 0 评论 -
字体颜色的使用-CSS入门基础（006）
今天我们接着说字体样式的内容。color字体颜色：语法：color:颜色值；颜色值可以是一个关键字，也可以是一个十六进制的RGB值。关键字的颜色值，其实就是比较常用的颜色的一种枚举值，比如black，黑色white，白色green，绿色blue，蓝色red，红色gray，灰色等等；示例代码：<html> <head><title>字体颜色关键字</titl...原创 2020-12-09 22:22:31 · 1820 阅读 · 0 评论 -
字体样式-CSS入门基础（005）
今天我们分享关于字体样式的内容。在网页开发中，需要优先考虑页面的文字样式属性。包括字体、大小、粗细、颜色等；CSS字体样式属性 属性值 说明 font-family 字体类型 font-size 字体大小 font-style 字体斜体 color 字体颜色 除了字体颜色以外，其他文字属性都是font前缀开头，可以根据英文意思去记忆，方便很多。font-family字体类型：在css中，使用font-fami...原创 2020-12-09 22:20:50 · 260 阅读 · 0 评论 -
子选择器的使用-CSS入门基础（004）
今天我们继续分享关于选择器的内容。子元素选择器，就是选中某个或某一类元素的子元素。语法：#father#child{width:100px;height:100px}#父层#子层{属性1：属性值；属性2：属性值}父元素与子元素必须用空格分隔开，表示在父元素包含下的子元素。示例代码：<html><head> <title>子元素选择器</title>...原创 2020-12-09 22:19:19 · 1680 阅读 · 0 评论 -
id选择器的使用-CSS入门基础（003）
上节说到选择器，这节我们继续分享关于选择器的内容。id选择器：元素可以设置一个id属性，然后通过id选择器对其进行css样式代码设置，从而达到该元素的样式显示。语法：#xxx{属性1:属性值;属性2:属性值;}#first{ width:100px; height:100px;}在id属性名前加上前缀“#”，就形成了id选择器。选择器的代码位置是<style></style>内部，也就是css代码区域处。示例代码...原创 2020-12-09 22:17:42 · 7991 阅读 · 2 评论 -
CSS选择器-CSS入门基础（002）
这一节我们分享一下关于CSS选择器的内容。在HTML元素中，属性id和class是两个最基本的公共属性，意思就是每个HTML标签元素都有这两个属性可以配置。元素的id属性：id属性在页面中被赋予了唯一性。如果一个页面中出现了多个相同id属性的取值，CSS选择器和JavaScript就无法分辨要控制的元素。语法：<div id="first"></div><xxxid=""></xxx>示例代码：...原创 2020-11-28 14:13:23 · 273 阅读 · 0 评论 -
CSS简介-CSS入门基础（001）
之前给大家分享的是HTML的入门基础，从今天起，我给大家分享关于CSS的内容。CSS是什么？CSS，英文名词 Cascading Style Sheet，中文意思层叠样式表，是用来控制网页外观的技术。在前端技术中，HTML，CSS，JavaScript是最核心的三个元素。HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。在网页发展的初期，网页仅仅使用HTML标签来制作，内容单调。CSS的出现就是为了改造HTML标签在浏览器展示的外观，使其更好看...原创 2020-11-28 14:11:49 · 242 阅读 · 0 评论