嘉兴制作网站企业,个人网站模板怎么用,泰安三合一网站建设公司,wordpress图床首页无缩略图重拾前端基础知识#xff1a;CSS 前言选择器简单选择器属性选择器组合选择器 插入CSS内嵌样式#xff08;Inline Style#xff09;内部样式#xff08;Internal Style#xff09;外部样式#xff08;External Style#xff09; 层叠颜色背景颜色文本颜色RGB 颜色HEX 颜色… 重拾前端基础知识CSS 前言选择器简单选择器属性选择器组合选择器 插入CSS内嵌样式Inline Style内部样式Internal Style外部样式External Style 层叠颜色背景颜色文本颜色RGB 颜色HEX 颜色HSL 颜色 背景背景颜色背景图像 文本文本对齐垂直对齐文本装饰文本转换文字间距文本阴影 字体字体样式字体大小 图标链接列表边框表格合并边框宽度和高度水平对齐垂直对齐水平分隔线可悬停表格条状表格 高度和宽度盒模型外边距内边距 轮廓布局显示定位溢出浮动 伪类伪元素透明度案例解析垂直导航栏水平导航栏 前言
CSS层叠样式表是一种用于描述网页内容外观和布局的样式表语言。它与 HTML 结合使用可以控制网页中元素的样式、排版、颜色、大小等方面从而实现页面的美化和布局控制。
CSS的语法由选择器和声明块组成 CSS注释以 /* 开始, 以 */ 结束, 实例如下
/*这是个注释*/
p{/*这是另一个注释*/color:black;
}示例代码如下
!DOCTYPE html
html
headtitle网页标题/titlestylep{color: red;}/style
/head
bodypcss示例/p
/body
/html我们可以通过样式修改字体的颜色如图所示
选择器
CSS 使用选择器来选中 HTML 文档中的元素并对其应用样式。
简单选择器
常见的选择器包括标签选择器如 p、h1、类选择器如 .myclass、ID 选择器如 #myid和属性选择器等。
标签选择器
标签选择器是 CSS 中最常见和最基础的选择器之一它可以选择 HTML 文档中所有特定类型的元素并对它们应用样式。
!DOCTYPE html
html
headtitle网页标题/titlestyleh1 {color:orange;}p {color: red;}/style
/head
bodypcss示例/ph1css示例2/h1
/body
/html如图所示 类选择器
类选择器的语法使用一个点 (.) 后跟类名称来定义例如 .classname。
!DOCTYPE html
html
headtitle网页标题/titlestyle.myclass{color: red;}/style
/head
bodydiv classmyclasscss示例/div
/body
/html注意类名不能以数字开头 ID选择器
每个 HTML 元素都可以具有唯一的 ID 属性因此 ID 选择器可用于选择唯一的元素并为其应用样式。ID 选择器的语法使用一个井号 (#) 后跟 ID 名称来定义例如 #myid。
!DOCTYPE html
html
headtitle网页标题/titlestyle#myid{color: red;}/style
/head
bodydiv idmyidcss示例/div
/body
/html注意id 名称不能以数字开头。 分组选择器
如果多个标签、class或id具有相同属性你可以用逗号(,)分隔。例如如果要选择同时具有 class1 和 class2 的元素可以使用以下代码
!DOCTYPE html
html
headtitle网页标题/titlestyle.myclass,.myclass2{color: red;}/style
/head
bodydiv classmyclasscss示例/divdiv classmyclass2css示例/div
/body
/html通用选择器
用星号(*)表示通用选择器匹配文档中的任何元素。
* {margin: 0;padding: 0;box-sizing: border-box;
}属性选择器
属性选择器是 CSS 中一种用于根据元素的属性值选择元素并为其应用样式的选择器。属性选择器允许您根据元素的属性及其对应的属性值来选择元素从而实现更具灵活性的样式控制。
选择具有特定属性的元素
[attribute] {/* 样式 */
}示例选中所有具有 target 属性的链接元素。
a[target] {color: red;
}选择具有特定属性及属性值的元素
[attributevalue] {/* 样式 */
}示例选中所有 type 属性值为 text 的输入框元素。
input[typetext] {border: 1px solid #ccc;
}选择具有包含特定属性值的元素属性值包含指定值
[attribute*value] {/* 样式 */
}示例选中所有 class 属性值中包含 btn 的按钮元素。
button[class*btn] {background-color: yellow;
}选择具有以特定属性值开头的元素
[attribute^value] {/* 样式 */
}示例选中所有 src 属性值以 https 开头的图像元素。
img[src^https] {border: 2px solid green;
}选择具有以特定属性值结尾的元素
[attribute$value] {/* 样式 */
}示例选中所有 href 属性值以 .pdf 结尾的链接元素。
a[href$.pdf] {color: blue;
}组合选择器
CSS 组合选择器是一种将多个选择器组合起来以选择满足特定条件的元素的方法。组合选择器允许您根据元素之间的关系来选择元素例如它们的父子关系、兄弟关系等。
后代选择器空格选择器
使用空格来选择作为某个元素后代的元素。
!DOCTYPE html
html
headtitle网页标题/titlestylediv p{color: red;}/style
/head
bodydivp段落一/pp段落二/p/divdivcss示例/div
/body
/html如图所示 子选择器直接子元素选择器
使用大于号选择作为某个元素直接子元素的元素。
!DOCTYPE html
html
headtitle网页标题/titlestyledivp{color: red;}/style
/head
bodydivp段落一/pp段落二/p/divdivcss示例/div
/body
/html如图所示 相邻兄弟选择器
使用加号选择与某个元素相邻的下一个元素。
!DOCTYPE html
html
headtitle网页标题/titlestyledivp{color: red;}/style
/head
bodydivp段落一/p/divpcss示例/ppcss示例2/p
/body
/html如图所示 一般兄弟选择器
使用波浪号~选择与某个元素具有相同父元素且在它之后的所有元素。
!DOCTYPE html
html
headtitle网页标题/titlestylediv~p{color: red;}/style
/head
bodydivp段落一/p/divpcss示例/ppcss示例2/p
/body
/html如图所示 插入CSS
在 HTML 中插入样式表的方法有三种内嵌样式、内部样式和外部样式。
内嵌样式Inline Style
在 HTML 元素中使用 style 属性来定义样式。这种方法适用于只需要修改单个元素的样式但不推荐在整个页面中使用。
p stylecolor: red; font-size: 16px;这是一段红色、字体大小为 16 像素的文本。/p内部样式Internal Style
在 HTML 文件的 head 标签中使用 style 标签来定义样式。这种方法适用于修改整个页面或整个网站的样式。
headstylep {color: red;font-size: 16px;}/style
/head
bodyp这是一段红色、字体大小为 16 像素的文本。/p
/body外部样式External Style
将样式定义在一个独立的 CSS 文件中然后在 HTML 文件中使用 link 标签来引用该文件。这种方法适用于修改整个网站的样式可以使样式与内容分离。
在css文件中定义样式
p {color: red;font-size: 16px;
}在 HTML 文件中引用该文件
headlink relstylesheet hrefstyles.css
/head
bodyp这是一段红色、字体大小为 16 像素的文本。/p
/body一般情况下优先级如下 内联样式 内部样式 外部样式 浏览器默认样式 层叠
当多个样式规则应用到同一个元素时CSS 使用层叠规则来确定最终的样式。通常情况下后面的规则会覆盖先前的规则但可以通过特定的选择器权重和级别来进行调整。
!DOCTYPE html
html langen
headstylep {color: blue;font-size: 18px;}.special {color: red;}/style
/head
bodyp classspecial stylefont-size: 20px;这是一个段落文本。/p
/body
/html这个段落的样式为文本颜色为红色、字体大小为 20px。 如果两个规则具有相同的重要性和特殊性则后出现的规则将覆盖前面的规则。 颜色
你可以使用CSS来修改颜色比如背景颜色、字体颜色、等。
背景颜色
可以使用background-color属性定义背景颜色。
!DOCTYPE html
html
headtitle网页标题/titlestylep{background-color: yellow;}/style
/head
bodypcss示例/p
/body
/html如图所示
文本颜色
使用color属性定义字体颜色。
!DOCTYPE html
html
headtitle网页标题/titlestylep{color: red;}/style
/head
bodypcss示例/p
/body
/html如图所示
RGB 颜色
在 CSS 中RGB 颜色值表示一种使用红色、绿色和蓝色分量来混合生成颜色的方法。每个颜色分量的取值范围是 0 到 255。你可以使用 rgb() 函数来指定一个颜色语法
color: rgb(red, green, blue);不同的数值展示的颜色深度也不同如下
!DOCTYPE html
html
headtitle网页标题/title
/head
bodyh1 stylebackground-color:rgb(255, 0, 0);rgb(255, 0, 0)/h1h1 stylebackground-color:rgb(0, 255, 0);rgb(0, 255, 0)/h1h1 stylebackground-color:rgb(0, 0, 255);rgb(0, 0, 255)/h1
/body
/html如图所示 RGBA与 RGB 类似但多了一个透明度Alpha分量用来控制颜色的透明程度。RGBA 中透明度分量的取值范围是 0.0 到 1.0。
!DOCTYPE html
html
headtitle网页标题/title
/head
bodyh1 stylebackground-color:rgba(120, 120, 0, 1);rgba(120, 120, 0, 1)/h1h1 stylebackground-color:rgba(120, 120, 0, 0.5);rgba(120, 120, 0, 0.5)/h1h1 stylebackground-color:rgba(120, 120, 0, 0);rgba(120, 120, 0, 0)/h1
/body
/html如图所示 HEX 颜色
在 CSS 中可以使用以下格式的十六进制值来指定颜色
三位十六进制值使用三位十六进制数来表示颜色其中每个分量由一个十六进制数字表示。每个分量的取值范围是 0 到 F其中 A 到 F 表示 10 到 15。
例如使用三位十六进制值 #F00 表示红色#0F0 表示绿色#00F 表示蓝色。
!DOCTYPE html
html
headtitle网页标题/title
/head
bodyh1 stylebackground-color:#F00;#F00/h1h1 stylebackground-color:#0F0;#0F0/h1h1 stylebackground-color:#00F;#00F/h1
/body
/html六位十六进制值使用六位十六进制数来表示颜色其中每个分量由两个十六进制数字表示。每个分量的取值范围是 00 到 FF。
例如使用六位十六进制值 #FF0000 表示红色#00FF00 表示绿色#0000FF 表示蓝色。
!DOCTYPE html
html
headtitle网页标题/title
/head
bodyh1 stylebackground-color:#FF0000;#FF0000/h1h1 stylebackground-color:#00FF00;#00FF00/h1h1 stylebackground-color:#0000FF;#0000FF/h1
/body
/html对于六位十六进制值如果每个分量的两个十六进制数字相同可以缩写为三位形式。例如#FF0000 可以缩写为 #F00#00FF00 可以缩写为 #0F0#0000FF 可以缩写为 #00F。
HSL 颜色
HSLHue、Saturation、Lightness是一种基于颜色的色彩模型它将颜色表示为色相、饱和度和亮度三个分量。在 HSL 模型中色相是一个角度值表示颜色在色轮上的位置饱和度表示颜色的强度或纯度亮度表示颜色的亮度或黑暗程度。
在 CSS 中我们可以使用 hsl() 函数来表示 HSL 颜色。其中第一个参数表示色相取值范围为 0 到 360第二个参数表示饱和度取值范围为 0% 到 100%第三个参数表示亮度也是取值范围为 0% 到 100%。例如红色可以表示为 hsl(0, 100%, 50%)其中色相为 0饱和度为 100%亮度为 50%
!DOCTYPE html
html
headtitle网页标题/title
/head
bodyh1 stylebackground-color:hsl(0, 100%, 50%)hsl(0, 100%, 50%)/h1h1 stylebackground-color:hsl(120, 100%, 50%)hsl(120, 100%, 50%)/h1h1 stylebackground-color:hsl(240, 100%, 50%);hsl(240, 100%, 50%)/h1
/body
/html除了 hsl() 函数外还有 hsla() 函数可用于设置带有透明度的 HSL 颜色它的第四个参数表示透明度取值范围为 0 到 1。例如带有半透明效果的红色可以表示为 hsla(0, 100%, 50%, 0.5)。
!DOCTYPE html
html
headtitle网页标题/title
/head
bodyh1 stylebackground-color:hsla(0, 100%, 50%, 0)hsla(0, 100%, 50%, 0)/h1h1 stylebackground-color:hsla(120, 100%, 50%, 0.5)hsla(120, 100%, 50%, 0.5)/h1h1 stylebackground-color:hsla(240, 100%, 50%, 1);hsla(240, 100%, 50%, 1)/h1
/body
/html背景
CSS 背景属性用于定义元素的背景效果。
背景颜色
使用background-color 属性指定元素的背景色。
!DOCTYPE html
html
headtitle网页标题/title
/head
body stylebackground-color: blue;
/body
/html如图所示 opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。
!DOCTYPE html
html
headtitle网页标题/title
/head
bodydiv stylebackground-color: blue;opacity: 0.1;h1css示例/h1/divdiv stylebackground-color: blue;opacity: 0.5;h1css示例/h1/div
/body
/html如图所示 如果您不希望对子元素应用不透明度例如上面的例子请使用 RGBA 颜色值。
!DOCTYPE html
html
headtitle网页标题/title
/head
bodydiv stylebackground-color: rgba(38, 2, 243, 0.1);h1css示例/h1/divdiv stylebackground-color: rgba(38, 2, 243, 0.5);h1css示例/h1/div
/body
/html如图所示
背景图像
使用background-image 属性指定用作元素背景的图像默认情况下图像会重复以覆盖整个元素。
body stylebackground-image: url(./1.webp);如图所示 默认情况下会在页面的水平或者垂直方向平铺。你可以使用background-repeat属性设置水平或垂直平铺。
!DOCTYPE html
html
headtitle网页标题/titlestylebody{background-image: url(./1.webp);background-repeat:repeat-x;//repeat-x水平平铺、repeat-y垂直平铺}/style
/head
body
/body
/html如图所示 如果你不想让图像平铺可以设置为no-repeat。
!DOCTYPE html
html
headtitle网页标题/titlestylebody{background-image: url(./1.webp);background-repeat:no-repeat;}/style
/head
body
/body
/html如图所示 使用background-position属性 可以接受一个关键字值如 top、bottom、left、right、center或者一个具体的长度值像素、百分比等可以控制背景图片相对于元素内部的位置从而实现不同的布局效果。
!DOCTYPE html
html
headtitle网页标题/titlestylebody{background-image: url(./1.webp);background-repeat:no-repeat;background-position:right top;//背景图片位于元素的右上角。}/style
/head
body
/body
/html如图所示 如需缩短代码也可以在一个属性中指定所有背景属性。它被称为简写属性。
body {background-color: #ffffff;background-image: url(tree.png);background-repeat: no-repeat;background-position: right top;
}简写后
body {background: #ffffff url(tree.png) no-repeat right top;
}文本
CSS 提供了很多用于设置文本样式的属性包括字体、颜色、大小、行高、字间距、文本阴影等。
前面颜色章节中介绍过文本颜色使用color属性设置下面介绍文本的其他用法。
文本对齐
text-align 属性用于设置文本的水平对齐方式取值包括left将文本左对齐、right将文本右对齐、center将文本居中对齐、justify将文本两端对齐通过调整单词间距来填充行的宽度。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodyh1 styletext-align: left;文本left对齐/h1h1 styletext-align: right;文本right对齐/h1h1 styletext-align: center;文本center对齐/h1h1 styletext-align: justify;文本justify对齐/h1
/body
/html如图所示 垂直对齐
vertical-align 属性用于设置元素内联元素的垂直对齐方式的 CSS 属性。
取值包括
1baseline默认值元素的基线与父元素的基线对齐。 2top元素的顶部与父元素的顶部对齐。 3middle元素在父元素中垂直居中对齐。 4bottom将元素的底部与父元素的底部对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv classbox textarea name id cols30 rows10 stylevertical-align: top;/textareatop/divdiv classbox textarea name id cols30 rows10 stylevertical-align: middle;/textareamiddle/divdiv classbox textarea name id cols30 rows10 stylevertical-align: bottom;/textareabottom/div
/body
/html如图所示 文本装饰
text-decoration 是 CSS 属性用于控制文本的装饰效果比如下划线、删除线、上划线等。常见的属性值包括 1none默认值表示没有任何装饰效果。 2underline在文本下方绘制一条下划线。 3overline在文本上方绘制一条上划线。 4line-through在文本中绘制一条删除线。 5underline overline同时绘制下划线和上划线。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv styletext-decoration:underlineunderline text/divdiv styletext-decoration:overlineoverline text/divdiv styletext-decoration:line-throughline-through text/divdiv styletext-decoration:underline overlineunderline overline text/div
/body
/html如图所示 文本转换
通过text-transform属性我们可以将文本转换为大写、小写或首字母大写形式。常见的属性值包括 1uppercase将所有字符转换为大写形式。 2lowercase将所有字符转换为小写形式。 3capitalize将每个单词的首字母转换为大写。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv styletext-transform:lowercaselowercase text/divdiv styletext-transform:uppercaseuppercase text/divdiv styletext-transform:capitalizecapitalize text/div
/body
/html如图所示 文字间距
text-indent 是 CSS 属性用于控制文本块的首行缩进。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv styletext-indent:2em这是一个美好的一天从今天开始好好学习天天向上/div
/body
/html如图所示 letter-spacing 属性用于指定文本中字符之间的间距。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv styleletter-spacing: 3px这是一个美好的一天从今天开始好好学习天天向上/div
/body
/html如图所示 line-height 属性用于指定行之间的间距。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv styleline-height: 10px这是一个美好的一天br从今天开始好好学习天天向上/div
/body
/html如图所示 文本阴影
text-shadow 是 CSS 属性用于为文本添加阴影效果。通过这个属性我们可以为文本设置阴影的颜色、模糊半径和阴影的偏移距离。
1h-shadow水平方向的阴影偏移距离可以为正值向右偏移或负值向左偏移。 2v-shadow垂直方向的阴影偏移距离可以为正值向下偏移或负值向上偏移。 3blur-radius阴影的模糊半径值越大表示阴影越模糊。 4color阴影的颜色。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv styletext-shadow: 2px 2px 5px red;这是一个美好的一天从今天开始好好学习天天向上/div
/body
/html如图所示 字体
在 CSS 中你可以使用 font-family 属性来设置文本的字体样式。 font-family 属性用于指定一个或多个字体名称浏览器会根据这些名称来显示文本应包含多个字体名称作为“后备”系统以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始并以通用系列结束。字体名称应以逗号分隔。。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv stylefont-family: Serif;css用例/divdiv stylefont-family: Sans-serif;css用例/divdiv stylefont-family: Monospace;css用例/divdiv stylefont-family: Cursive;css用例/divdiv stylefont-family: Fantasy;css用例/divdiv stylefont-family: Arial, Helvetica, sans-serif;css用例/div
/body
/html如图所示 字体样式
font-style 是 CSS 属性之一用于设置文本的字体风格例如斜体或正常体。这个属性可以接受以下几个值 1normal默认值表示文本以正常字体展示。 2italic表示文本以斜体展示。 3oblique表示文本以倾斜的形式展示类似于斜体。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv stylefont-style: normal;css用例/divdiv stylefont-style: italic;css用例/divdiv stylefont-style: oblique;css用例/div
/body
/html如图所示 font-weight 用于设置文本的字体粗细度。这个属性可以接受以下几个值
1bold表示文本以粗体展示。 2bolder表示文本以更粗的字体展示。 3lighter表示文本以更细的字体展示。 4数字值表示文本以指定的粗细度展示例如 font-weight: 500。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv stylefont-weight: bold;css用例/divdiv stylefont-weight: bolder;css用例/divdiv stylefont-weight: lighter;css用例/divdiv stylefont-weight: 50px;css用例/div
/body
/html如图所示 font-variant 属性指定是否以 small-caps 字体小型大写字母显示文本。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv stylefont-variant: small-caps;this is a css demo/div
/body
/html如图所示 字体大小
font-size 用于设置文本的字体大小。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv stylefont-size: 10px;css用例/divdiv stylefont-size: 50px;css用例/div
/body
/html如图所示 为了避免Internet Explorer 中无法调整文本的问题许多开发者使用 em 单位代替像素。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此1em的默认大小是16px。可以通过下面这个公式将像素转换为empx/16em
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv stylefont-size: 1em;css用例/divdiv stylefont-size: 2em;css用例/div
/body
/html如图所示 为了缩短代码你可以使用 font 属性来简写设置文本的字体样式。
selector {font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}以下是一个示例代码展示了如何使用 font 属性来简写设置文本的字体样式
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodydiv stylefont:italic small-caps bold 12px/30px Georgia, serif;css用例/div
/body
/html如图所示 图标
向 HTML 页面添加图标的最简单方法是使用图标库比如Font Awesome、Bootstrap glyphicons等。
如需使用 Bootstrap glyphicons请在 HTML 页面的 head 部分内添加这行
link relstylesheet hrefhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css完整代码如下
!DOCTYPE html
html
headtitle网页标题/titlelink hrefhttps://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.css relstylesheet
/head
bodyi classbi-alarm/ii classbi bi-textarea-resize/ii classbi bi-capsule-pill/i
/body
/html如图所示 链接
可以根据链接处于什么状态来设置链接的不同样式。
a:link正常的未访问的链接。
a:link {color: red;
}a:visited用户访问过的链接
a:visited {color: black;
}a:hover用户将鼠标悬停在链接上时。
a:hover {color: pink;
}a:active链接被点击时。
a:active {color: blue;
}注意 在CSS定义中a:hover 必须被置于 a:link 和 a:visited 之后a:active 必须被置于 a:hover 之后才是有效的。 列表
list-style-type: 设置列表项标记的类型如 disc实心圆、circle空心圆、square实心正方形、decimal数字、lower-roman小写罗马数字等。
!DOCTYPE html
html
headtitle网页标题/titlestyleul.a {list-style-type: circle;}ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}/style
/head
bodyp无序列表实例/pul classaliCoffee/liliTea/liliCoca Cola/li/ulul classbliCoffee/liliTea/liliCoca Cola/li/ulp有序列表实例/pol classcliCoffee/liliTea/liliCoca Cola/li/olol classdliCoffee/liliTea/liliCoca Cola/li/ol
/body
/html如图所示 list-style-image 属性将图像指定为列表项标记
!DOCTYPE html
html
headtitle网页标题/titlestyleul.a {list-style-image: url(./a1.svg);}/style
/head
bodyul classaliCoffee/liliTea/liliCoca Cola/li/ul
/body
/html如图所示 边框
CSS 边框border属性用于定义元素的边框样式、宽度和颜色。通过设置不同的边框属性可以为元素添加边框以及调整其样式。
border 属性是用于设置 HTML 元素的边框样式、宽度和颜色的 CSS 属性之一。它可以应用于几乎所有 HTML 元素包括 div、p、table 等。
border 属性可以具有三个值
border-style设置边框的样式常见的样式包括实线 (solid)、虚线 (dotted)、双实线 (double)、点划线 (dashed) 等。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodyp styleborder-style:dotted点状边框。/pp styleborder-style:dashed;虚线边框。/pp styleborder-style:solid;实线边框。/pp styleborder-style:double;双线边框。/pp styleborder-style:groove;凹槽边框。/pp styleborder-style:ridge;垄状边框。/pp styleborder-style:inset;3D inset 边框。/pp styleborder-style:outset;3D outset 边框。/pp styleborder-style:none;无边框。/pp styleborder-style:hidden;隐藏边框。/p
/body
/html如图所示 border-width设置四个边框的宽度上边框、右边框、下边框和左边框。可以是像素值如 1px、百分比值相对于父元素宽度的百分比。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodyp styleborder-style: solid;border-width:1px实线边框。/pp styleborder-style: solid;border-width:1px 2px实线边框。/pp styleborder-style: solid;border-width:1px 2px 3px实线边框。/pp styleborder-style: solid;border-width:1px 2px 3px 4px实线边框。/p
/body
/html如图所示 border-color设置边框的颜色可以是具体的颜色值如 red、#00ff00可以设置一到四个值用于上边框、右边框、下边框和左边框。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodyp styleborder-style: solid;border-color:red实线边框。/pp styleborder-style: solid;border-color:red green blue yellow实线边框。/p
/body
/html如图所示 您还可以只为一个边指定所有单个边框属性
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodyp styleborder-top: 1px solid black;top边框/pp styleborder-right: 1px solid black;;right边框/pp styleborder-bottom: 1px solid black;;bottom边框/pp styleborder-left: 1px solid black;;left边框/p
/body
/html如图所示 你也可以简写border: border-width border-style(必填) border-color;。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodyp styleborder: 1px solid red;实线边框。/p
/body
/html如图所示 表格
在 CSS 中你可以使用样式来美化和布局 HTML 表格。通过设置不同的 CSS 属性可以调整表格的边框样式、背景颜色、字体样式等从而定制表格的外观。
合并
border-collapse: 设置表格边框的合并方式可以取值 collapse 合并边框或 separate 分开边框。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodytable border1px styleborder-collapse: collapsetrthFirstname/ththLastname/th/trtrtdBill/tdtdGates/td/trtrtdSteve/tdtdJobs/td/tr/table
/body
/html如图所示 边框
border: 设置表格边框的样式、宽度和颜色如 border: 1px solid black;。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodytable border1px solid black;trthFirstname/ththLastname/th/trtrtdBill/tdtdGates/td/trtrtdSteve/tdtdJobs/td/tr/table
/body
/html如图所示 宽度和高度
表格的宽度和高度由 width 和 height 属性定义。
!DOCTYPE html
html
headtitle网页标题/titlestyletable {width: 100%;}th {height: 50px;}/style
/head
bodytable border1px solid black;trthFirstname/ththLastname/th/trtrtdBill/tdtdGates/td/trtrtdSteve/tdtdJobs/td/tr/table
/body
/html如图所示 水平对齐
text-align 属性设置 th 或 td 中内容的水平对齐方式左、右或居中。
!DOCTYPE html
html
headtitle网页标题/titlestyletable {width: 100%;}th {text-align: center;}td{text-align: left;}/style
/head
bodytable border1px solid black;trthFirstname/ththLastname/th/trtrtdBill/tdtdGates/td/trtrtdSteve/tdtdJobs/td/tr/table
/body
/html如图所示 垂直对齐
vertical-align 属性设置 th 或 td 中内容的垂直对齐方式上、下或居中。
!DOCTYPE html
html
headtitle网页标题/titlestyletable {width: 100%;height: 180px;}th {vertical-align: middle;}td{vertical-align: bottom;}/style
/head
bodytable border1px solid black;trthFirstname/ththLastname/th/trtrtdBill/tdtdGates/td/trtrtdSteve/tdtdJobs/td/tr/table
/body
/html如图所示 水平分隔线
使用 border-bottom 属性以实现水平分隔线
!DOCTYPE html
html
headtitle网页标题/titlestyleth,td {border-bottom: 1px solid black;}/style
/head
bodytabletrthFirstname/ththLastname/th/trtrtdBill/tdtdGates/td/trtrtdSteve/tdtdJobs/td/tr/table
/body
/html如图所示 可悬停表格
在 tr 元素上使用 :hover 选择器以突出显示鼠标悬停时的表格行
!DOCTYPE html
html
headtitle网页标题/titlestyletr:hover {background-color: pink;}/style
/head
bodytabletrthFirstname/ththLastname/th/trtrtdBill/tdtdGates/td/trtrtdSteve/tdtdJobs/td/tr/table
/body
/html如图所示 条状表格
实现斑马纹表格效果请使用 nth-child() 选择器。
!DOCTYPE html
html
headtitle网页标题/titlestyle/* tr:nth-child(odd)为奇数 */tr:nth-child(even) {background-color: gray;}/style
/head
bodytabletrthFirstname/ththLastname/th/trtrtdBill/tdtdGates/td/trtrtdSteve/tdtdJobs/td/tr/table
/body
/html如图所示
高度和宽度
height 和 width 属性用于设置元素的高度和宽度。
auto - 默认。浏览器计算高度和宽度。length - 以 px、cm 等定义高度/宽度。% - 以包含块的百分比定义高度/宽度。initial - 将高度/宽度设置为默认值。inherit - 从其父值继承高度/宽度。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {height: 200px;width: 50%;background-color: powderblue;}/style
/head
bodydiv宽度和高度/div
/body
/html如图所示
盒模型
在 CSS 中每个 HTML 元素被视为一个矩形的盒子具有内容区、内边距、边框和外边距。开发者可以利用这些属性来控制元素的尺寸、间距和边框等。 外边距margin围绕边框的空白区域用于控制元素与其他元素之间的距离。边框border紧接着内边距的边界用于定义内容区域的边界。内边距padding围绕内容区域的空白区域可以用来扩展或收缩内容与边框之间的距离。内容区域content显示元素的实际内容如文本、图片等。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 200px;height: 100px;padding: 20px;margin: 25px;border: 2px solid black;}/style
/head
bodydiv这里是盒子内的实际内容。/div
/body
/html如图所示 外边距
margin 属性用于在任何定义的边框之外为元素周围创建空间。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 200px;height: 100px;margin: 25px;border: 1px solid black;}/style
/head
bodydiv这里是盒子内的实际内容。/div
/body
/html如图所示 CSS 拥有用于为元素的每一侧指定外边距的属性margin-top、margin-right、margin-bottom、margin-left。为了缩减代码可以在一个属性中指定所有外边距属性上边距、右边距、下边距、左边距。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 200px;height: 100px;margin: 25px 50px 75px 100px;border: 1px solid black;}/style
/head
bodydiv这里是盒子内的实际内容。/div
/body
/html如图所示 您可以将 margin 属性设置为 auto以使元素在其容器中水平居中。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 200px;height: 100px;margin: auto;border: 1px solid black;}/style
/head
bodydiv这里是盒子内的实际内容。/div
/body
/html如图所示 你可以说设置为inherit 值继承自父元素边距
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 200px;height: 100px;margin-left: 10px;border: 1px solid black;}div p{margin: inherit;}/style
/head
bodydivp这里是盒子内的实际内容。/p/div
/body
/html如图所示
内边距
padding 属性用于在任何定义的边界内的元素内容周围生成空间。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 200px;height: 100px;padding: 25px;border: 1px solid black;}/style
/head
bodydivp这里是盒子内的实际内容。/p/div
/body
/html如图所示 CSS 拥有用于为元素的每一侧指定外边距的属性padding-top、padding-right、padding-bottom、padding-left。为了缩减代码可以在一个属性中指定所有外边距属性上边距、右边距、下边距、左边距。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 200px;height: 100px;padding: 25px 50px 75px 100px;border: 1px solid black;}/style
/head
bodydivp这里是盒子内的实际内容。/p/div
/body
/html如图所示
轮廓
轮廓outline是一种绘制在元素周围的线条类似于边框border但不影响布局。轮廓通常用于突出显示元素而不会改变元素本身的大小或位置。
轮廓outline属性可以设置以下几个方面
outline-width设置轮廓的宽度。outline-style设置轮廓的样式如实线、虚线等。outline-color设置轮廓的颜色。outline-offset设置轮廓与边框之间的距离。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodyp styleoutline-style: dotted;点状轮廓/pp styleoutline-style: dashed;虚线轮廓/pp styleoutline-style: solid;实线轮廓/pp styleoutline-style: double;双线轮廓/pp styleoutline-style: groove;凹槽轮廓。效果取决于 outline-color 值。/pp styleoutline-style: ridge;凸脊轮廓。效果取决于 outline-color 值。/pp styleoutline-style: inset;凹边轮廓。效果取决于 outline-color 值。/pp styleoutline-style: outset;凸边轮廓。效果取决于 outline-color 值。/p
/body
/html如图所示 outline 属性是用于设置以下各个轮廓属性的简写属性
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodyp styleoutline: 1px dotted red点状轮廓/pp styleoutline: 1px dashed red;虚线轮廓/p
/body
/html如图所示 outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {margin: 30px;border: 1px solid black;outline: 1px solid red;outline-offset: 15px;}/style
/head
bodydiv轮廓/div
/body
/html如图所示 轮廓outline和边框border在CSS中都可以用来为元素添加一种边界效果但它们有一些区别 影响布局边框会占据元素的空间并影响布局而轮廓不会。边框的大小和样式会改变元素的尺寸和位置而轮廓不会改变元素的盒子模型。 绘制位置边框绘制在元素的内边距和内容之外而轮廓则绘制在边框之外。这意味着边框是紧贴着元素内部的而轮廓是在边框外创建额外的边界线。 样式和属性边框具有更多的样式和属性选项可以设置边框的宽度、样式、颜色以及圆角等。轮廓的样式只能是实线、虚线或双线且不能单独设置圆角。 交互行为默认情况下轮廓通常在用户焦点落在元素上时显示例如通过键盘导航或鼠标点击。边框则始终可见无论焦点在元素上与否。
在实际应用中边框常用于为元素提供装饰效果和分隔元素之间的空间而轮廓常用于突出显示焦点元素或指示元素的状态。
布局
CSS 提供了多种布局方法包括浮动、定位、弹性布局、网格布局和 Flexbox 等可以实现复杂的页面布局。
显示
display 属性用于定义元素的显示类型决定了元素如何在页面中呈现。它可以控制元素是以块级元素、内联元素还是其他特殊类型显示。 常见的 display 属性值包括
block将元素显示为块级元素独占一行并且默认会占满其父容器的宽度。块级元素可以设置宽度、高度、边距等属性例如 div 元素默认就是块级元素。
!DOCTYPE html
html
headtitle网页标题/titlestylespan {display: block;}/style
/head
bodyspan示例1/spanspan示例2/span
/body
/html如图所示
inline将元素显示为内联元素不会独占一行而是与其他元素在同一行上排列。内联元素的宽度由内容决定无法设置宽度、高度等属性例如 span 元素默认就是内联元素。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {display: inline;width: 10px;}/style
/head
bodydiv示例1/divdiv示例2/div
/body
/html如图所示
inline-block将元素显示为内联块级元素类似于内联元素但可以设置宽度、高度、边距等属性。内联块级元素在同一行上排列且可以在同一行上设置多个元素。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {display: inline-block;width: 10px;}/style
/head
bodydiv示例1/divdiv示例2/div
/body
/html如图所示
none将元素隐藏不会在页面中显示也不会占据空间。隐藏的元素不会被渲染对布局没有影响。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {display: none;}/style
/head
bodydiv示例1/divdiv示例2/div
/body
/html定位
position 属性用于控制元素在文档中的位置。它有以下几个值可选
static默认值元素按照其在文档流中的位置进行布局。它不会受到top、bottom、left和right属性的影响。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 500px;position: static;top: 100px;border: 1px solid red;}/style
/head
bodydiv示例1/div
/body
/html如图所示
relative元素相对于其正常位置进行定位即相对于其在文档流中的位置进行偏移。可以通过top、bottom、left和right属性来指定偏移的距离。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 500px;position: relative;top: 100px;border: 1px solid red;}/style
/head
bodydiv示例1/div
/body
/html如图所示 相对定位元素经常被用来作为绝对定位元素的容器块。 absolute元素相对于其最近的已定位祖先元素进行定位如果没有已定位的祖先元素则相对于浏览器窗口进行定位。可以通过top、bottom、left和right属性来指定偏移的距离。
!DOCTYPE html
html
headtitle网页标题/titlestyle.a {width: 400px;height: 400px;position: relative;border: 1px solid red;}.b {width: 100px;position: absolute;top: 20px;left: 50px;border: 1px solid red;}/style
/head
bodydiv classadiv classb示例1/div/div
/body
/html如图所示 fixed元素相对于浏览器窗口进行定位即使页面滚动也会保持在固定的位置。也可以使用top、bottom、left和right属性来指定偏移的距离。
!DOCTYPE html
html
headtitle网页标题/titlestyle.a {width: 100px;position: fixed;right: 5px;border: 1px solid red;}/style
/head
bodyp classa示例1/pp示例1/p!-- 省略100个标签 --
/body
/html如图所示 sticky根据用户的滚动位置进行定位。元素根据滚动位置在相对relative和固定fixed之间切换。起先它会被相对定位直到在视口中遇到给定的偏移位置为止。
!DOCTYPE html
html
headtitle网页标题/titlestyle.a {width: 100px;position: -webkit-sticky; /* Safari */position: sticky;top: 0;border: 1px solid red;}/style
/head
bodyp classasticky示例/pp示例1/p!-- 省略100个标签 --
/body
/html如图所示 注Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix z-index属性指定了一个元素的堆叠顺序哪个元素应该放在前面或后面。
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{position: absolute;top: 0px;z-index: -1;}/style
/head
bodyp这是一个文字/pimg src./123456.jpg alttitle
/body
/htmlz-index属性接受任何整数值和关键字auto。通常使用整数值较大的值会使元素显示在较小值的元素之上。 如图所示 溢出
当元素的内容超出其指定的尺寸或父容器的尺寸时就会发生溢出overflow。可以使用overflow属性来控制溢出内容的表现方式。
overflow属性有以下几个常用的取值
visible默认值。内容会溢出到元素框之外可能会覆盖其他元素。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 200px;height: 100px;overflow: visible;}/style
/head
bodydivtest文本test文本.../div
/body
/html如图所示
hidden溢出的内容会被隐藏不会显示在元素框之外。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 200px;height: 100px;overflow: hidden;}/style
/head
bodydivtest文本test文本.../div
/body
/html如图所示
scroll/auto如果内容溢出则在需要时显示滚动条。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 200px;height: 100px;overflow: scroll;}/style
/head
bodydivtest文本test文本.../div
/body
/html如图所示
overlay在内容溢出时内容会在元素框之上继续显示但会截断。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 200px;height: 100px;overflow: overlay;}/style
/head
bodydivtest文本test文本.../div
/body
/html如图所示 浮动
浮动float是一种常用的布局技术用于将元素沿着左侧或右侧浮动并使其脱离正常文档流。浮动的元素会漂浮在其容器的左侧或右侧并允许其他内容环绕在周围。
float 属性可以设置以下值之一
left - 元素浮动到其容器的左侧
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{float: left;}/style
/head
bodydivimg src./123456.jpg alttitle 这是一个文本内容/div
/body
/html如图所示 right - 元素浮动在其容器的右侧
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{float: right;}/style
/head
bodydivimg src./123456.jpg alttitle 这是一个文本内容/div
/body
/html如图所示 none - 元素不会浮动将显示在文本中刚出现的位置。默认值。
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{float: none;}/style
/head
bodydivimg src./123456.jpg alttitle 这是一个文本内容/div
/body
/html如图所示 inherit - 元素继承其父级的 float 值。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{float: right;}img{float: inherit;}/style
/head
bodydivimg src./123456.jpg alttitle 这是一个文本内容/div
/body
/html如图所示 元素浮动之后周围的元素会重新排列为了避免这种情况使用 clear 属性。可设置以下值之一 1left - 左侧不允许浮动元素 2right- 右侧不允许浮动元素 3both - 左侧或右侧均不允许浮动元素 4inherit - 元素继承其父级的 clear 值
!DOCTYPE html
html
headtitle网页标题/titlestyle.a{float: left;width: 100px;height: 50px;border: 3px solid #73AD21;}.b{border: 3px solid yellow;width: 100px;height: 50px;clear: both;}/style
/head
bodydiv classa这是一个文本内容/divdiv classb/div
/body
/html如图所示 伪类
常见的伪类包括但不限于
:hover用于选择鼠标悬停在元素上的状态通常用于创建交互效果。
!DOCTYPE html
html
headtitle网页标题/titlestylediv:hover{background-color: green;}/style
/head
bodydiv伪类示例/div
/body
/html如图所示
:active用于选择被激活的元素例如当用户点击鼠标按钮但尚未释放时。
!DOCTYPE html
html
headtitle网页标题/titlestylediv:active{background-color: green;}/style
/head
bodydiv伪类示例/div
/body
/html:focus用于选择当前拥有键盘输入焦点的元素通常用于增强表单元素的可访问性。
!DOCTYPE html
html
headtitle网页标题/titlestyleinput:focus {border: 11px solid yellow;}/style
/head
bodyinput typetext
/body
/html如图所示 :first-child选择作为其父元素的第一个子元素的元素。
!DOCTYPE html
html
headtitle网页标题/titlestylediv:first-child{color: red;}/style
/head
bodydiv伪类示例/divdiv伪类示例/div
/body
/html如图所示 :last-child选择作为其父元素的最后一个子元素的元素。
!DOCTYPE html
html
headtitle网页标题/titlestylediv:last-child{color: red;}/style
/head
bodydiv伪类示例/divdiv伪类示例/div
/body
/html如图所示
:not()选择除了指定元素之外的所有元素。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{color: black;}:not(div){color: red;}/style
/head
bodydiv伪类示例/divp伪类示例/pdiv伪类示例/div
/body
/html如图所示
:disabled选择被禁用的表单元素。
!DOCTYPE html
html
headtitle网页标题/titlestyleinput[typetext]:enabled{color: red;}input[typetext]:disabled{background:#dddddd;}/style
/head
bodyinput typetextinput typetext disabled
/body
/html如图所示
除此之外还有:empty、:only-child等等有兴趣的可以自己了解。
伪元素
伪元素是用于在元素的特定位置插入内容的虚拟元素。它们使用双冒号 :: 来表示用于向元素的特定位置添加样式或内容。
::before在元素内容的前面插入内容。
!DOCTYPE html
html
headtitle网页标题/titlestylep::before {content: 前置内容;color: red;}/style
/head
bodyp伪元素/p
/body
/html如图所示 ::after在元素内容的后面插入内容。
!DOCTYPE html
html
headtitle网页标题/titlestylep::after {content: 后置内容;color: red;}/style
/head
bodyp伪元素/p
/body
/html如图所示
::first-letter选择元素内容的第一个字母。
!DOCTYPE html
html
headtitle网页标题/titlestylep::first-letter {font-size: 2em;color: blue;}/style
/head
bodyp伪元素/p
/body
/html如图所示
::first-line选择元素内容的第一行。
!DOCTYPE html
html
headtitle网页标题/titlestylep::first-line {color: red;}/style
/head
bodyp伪元素br第二行/p
/body
/html如图所示
透明度
opacity 属性指定元素的不透明度/透明度取值范围为 0.0-1.0。值越低越透明。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 150px;height: 150px;background-color: blue;opacity: 0.1;}div:hover{opacity: 1;}/style
/head
bodydiv/div
/body
/html如图所示 案例解析
垂直导航栏
!DOCTYPE html
html
headtitle网页标题/titlestyleul{list-style-type: none;padding: 0px;margin: px;border: 1px solid black;width: 200px;text-align: center;background-color: antiquewhite;}li:hover{background-color: gray;}/style
/head
bodyullia href#home主页/a/lilia href#news新闻/a/lilia href#contact联系/a/lilia href#about关于/a/li/ul
/body
/html如图所示 水平导航栏
!DOCTYPE html
html
headtitle网页标题/titlestyleul{list-style-type: none;border: 1px solid black;overflow: hidden;background-color: black;}li{float: left;}li a {text-align: center;padding: 14px 16px;text-decoration: none;color: white;}li:hover{background-color: gray;}/style
/head
bodyullia href#home主页/a/lilia href#news新闻/a/lilia href#contact联系/a/lilia href#about关于/a/li/ul
/body
/html如图所示 下拉菜单
!DOCTYPE html
html
headtitle网页标题/titlestyleul{list-style-type: none;border: 1px solid black;overflow: hidden;background-color: black;}li{float: left;}li a {text-align: center;padding: 14px 16px;text-decoration: none;color: white;}li:hover{background-color: gray;}.dropdown-content {/*默认不显示*/display: none;position: absolute;background-color: gray;}.dropdown-content a {display: inherit;}.dropdown-content a:hover {/*鼠标悬浮后显示的背景色*/background-color: #f1f1f1}/*悬浮后显示其他标签*/.dropdown:hover .dropdown-content {display: block;}/style
/head
bodyullia href#home主页/a/lilia href#news新闻/a/lilia href#contact联系/a/lili classdropdowna href#about关于/adiv classdropdown-contenta href#Link 1/aa href#Link 2/aa href#Link 3/a/div/li/ul/body
/html如图所示
