目录
一.CSS伪类
1.什么是CSS伪类?
-
伪类定义
用于表示元素的某种状态,主要有操作状态,选择器状态以及表单状态几种
常见的形式是单冒号" : "表示伪类。
-
伪类实际使用场景举例
设置鼠标悬停在元素上时的样式 ;为已访问和未访问链接设置不同的样式 ; 设置元素获得焦点时的样式 。
2.CSS伪类的种类有哪些?怎么应用?
-
状态伪类
元素的样式会根据其状态呈现不同的样式,当元素处于某状态时会呈现该样式,而进入另一状态后,该样式也会失去。
:link 应用于未被访问过的链接;
:hover 应用于鼠标悬停到的元素;
:active 应用于被激活的元素;
:visited 应用于被访问过的链接,与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
实例(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* 未访问的链接 */
a:link {
color: red;
}
/* 已访问的链接 */
a:visited {
color: green;
}
/* 鼠标悬停链接 */
a:hover {
color: hotpink;
}
/* 已选择的链接*/
a:active {
color: blue;
}
/*键盘输入焦点的元素*/
input:focus {
background-color: yellow;
}
</style>
</head>
<body>
<p><a href="https://mp.csdn.net/mp_blog/creation/editor/137126884?spm=1001.2014.3001.4503">这是蓝旭第二周预习作业</a></p >
<form>
名: <input type="text" name="fname"><br>
姓: <input type="text" name="lname"><br>
<input type="submit" value="保存">
</form>
</body>
</html>
运行结果:
注*:这几个伪类同时出现在一个元素的操作上,顺序不能改变,否则很大程度上会产生紊乱,造成效果失效!a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后,才能生效。(意思是必须先写a:link 和 a:visited再写 :hover)a:active 必须在 CSS 定义中的 a:hover 之后才能生效。(意思是必须先写a:hover再写 :active)另外伪类名称对大小写并不敏感
伪类与CSS类:
实例(2)
当鼠标悬停在类hightlight上时,会改变颜色:
a.highlight:hover {
color: red;
}
当悬停在div上
div:hover {
background-color: blue;
}
当悬停在div元素<h1>元素(类似工具提示的效果)
h1 {
display: none;
background-color: green;
padding: 25px;
}
div:hover h1 {
display: block;
}
运行结果:
-
结构性伪类
利用dom树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class和id属性的定义,使文档结构更简洁。
- :first-child 选择某个元素的第一个子元素;
- :last-child 选择某个元素的最后一个子元素;
- :nth-child(n) 匹配属于其父元素的第 n个子元素,不论元素的类型;
- :nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素,不论元素的类型;
- :nth-of-type() 规定属于其父元素的第n个 指定 元素;
- :nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定 元素;\n :first-of-type 选择一个上级元素下的第一个同类子元素;
- :last-of-type 选择一个上级元素的最后一个同类子元素;
- :only-child 选择它的父元素的唯一一个子元素;
- :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
- :checked匹配被选中的input元素,这个input元素包括radio和checkbox。
- :empty 选择的元素里面没有任何内容。\n :disabled匹配禁用的表单元素。
- :enabled匹配没有设置disabled属性的表单元素。
- :valid匹配条件验证正确的表单元素。
- :in-range选择具有指定范围内的值的 \u003Cinput> 元素。
- :optional选择不带 \"required\" 属性的 \u003Cinput> 元素。
- :focus选择获得焦点的 \u003Cinput> 元素。
实例:
选择器匹配p元素的第一个子元素:
:first-child { color: rgb(29, 74, 236); }
匹配所有<p>元素中的的<i>元素:
i:first-child { color: blue; }
匹配所有首个 <p> 元素中的所有 <i> 元素
:first-child i { color: rgb(28, 217, 35); }
CSS - :lang 伪类
:lang 伪类允许您为不同的语言定义特殊的规则。
在下面的例子中,:lang 为属性为 lang="en" 的 <q> 元素定义引号:
二.CSS元素
1.什么是伪元素?
-
伪元素的定义
CSS伪元素用于设置元素指定的部分样式。
-
伪元素实际使用场景举例
设置元素的首字母、首行的样式;在元素的内容之前或之后插入内容
2.css伪元素的种类有几种?怎么应用?
-
语法
selector::pseudo-element {
property: value;
}
-
种类
实例:
::first-line 伪元素用于向文本的首行添加特殊样式。
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
注*:以下属性适用于 ::first-line 伪元素:
字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
::first-letter 伪元素用于向文本的首字母添加特殊样式。
p::first-letter {
color: #06e5bc;
font-size: xx-large;
}
注*:::first-letter 伪元素只适用于块级元素。
下面的属性适用于 ::first-letter 伪元素:
字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align(仅当 "float" 为 "none")
text-transform
line-height
float
clear
伪元素可以与 CSS 类结合使用:
p.intro::first-letter {
color: #b31195;
font-size: 200%;
}
.intro{
width: 10px;
}
::before 伪元素可用于在元素内容之前插入一些内容。
h1::before {
content: url(微信截图_20240330193303.png);
height: 10px;
width:10px;
}
::after 伪元素可用于在元素内容之后插入一些内容。
h1::after{
content:url(微信截图_20240330195712.png);
}
::selection 伪元素匹配用户选择的元素部分。
p::selection{
color: red;
background: yellow;
}
注*: 以下 CSS 属性可以应用于 ::selection:
color
background
cursor
outline
三.关系选择器
1.关系选择器是是什么?
-
关系选择器的定义
能够根据其它元素的关系选择适合的元素选择器。
2.关系选择器的种类有哪些?
-
子元素选择器
作用:通过制定的元素指定的子元素
语法:父元素>子元素{}
实例:
p>span{
color:#c4103d;
font-weight:bold;
font-size: 20px;
-
后代选择器
作用:通过指定的祖先元素找到指定的子元素。
语法:父元素 子元素{}(父元素与子元素之间有空格)
h4 span{
background-color:rgb(134, 65, 65);
}
-
下一个兄弟选择器
作用:选择于当前元素紧挨着的下一个同级元素。
语法:兄+弟{}
h5+h6{
background-color: aqua;
color:aliceblue;
}
-
所有兄弟选择器
作用:选择与当前元素下的所有元素。
语法:兄~弟
h5~span{
background-color: #ff0000;
color:rgb(204, 132, 37);
}
四.css布局
1.css布局是什么?
-
CSS的定义
指网页内容的组织和呈现方式。
2.CSS布局的种类有哪些?怎么应用?
-
HTML表格(Table)
在HTML中,表格可以用来创建复杂的布局,但这种方法并不推荐,因为它主要用于数据的展示,而不是布局。
-
CSS布局
CSS提供了多种布局技术,包括:
Flexbox(弹性盒子):一种现代的布局方式,可以很容易地在水平或垂直方向上对齐元素。
.flex-container {
display: flex;
justify-content: space-between;
background: #0ab058;
}
.flex-item{
background: #cd3030;
padding: 10px;
margin: 10px;
}
Grid:一种更加强大的布局方式,可以创建复杂的网格布局。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background: #a13737;
padding: 10px;
}
.grid-item {
background: #791a61;
padding: 10px;
}
浮动(Float):可以使元素向左或向右浮动,然后其他元素会围绕它排列。
.left-float{
float:left;
width:30%;
background: #3cb49e;
padding: 10px ;
}
.right-float {
float: right;
width: 30%;
background: #a31e8f;
padding: 10px;}
定位(Positioning):包括 static 、 relative 、 absolute 、 fixed 和 sticky 等属性,用于精确控制元素的位置。
.positioned {
position:static;
top: 30px;
left: 3px;
background: #02f4f8;
padding: 10px;
}
注*:使用 position 属性可以将元素相对于其正常位置进行偏移。
static (默认): 不进行定位。
relative : 相对于其正常位置进行偏移。
absolute : 相对于最近的已定位(非 static )祖先元素进行偏移。
fixed : 相对于视口(viewport)进行偏移。
sticky : 结合了 relative 和 fixed 的特性,当元素在视口中时表现得像 relative ,当滚动超出某个阈值时表现得像 fixed 。
盒模型(Box Model):包括 margin 、 border 、 padding 和 content 等属性,用于控制元素的间距和大小。
.element {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid #eb6a01;
margin: 10px;
box-sizing: border-box; /* 使用 border-box 计算盒模型 */
}
注*:
内容区域(Content Area):
这是盒模型的中心部分,包含了元素的文本和内联内容。它的大小可以通过 width 和 height 属性来设置。
内边距(Padding):
内边距位于内容区域的周围,它扩展了内容区域的背景,但不包含边框。内边距的大小可以通过 padding 属性来设置,也可以分别使用 padding-top 、 padding-right 、 padding-bottom 和 padding-left 来设置四个方向的内边距。
边框(Border):
边框围绕着内边距,可以设置边框的样式、宽度和颜色。边框的大小可以通过 border 属性来设置,也可以分别使用 border-top 、 border-right 、 border-bottom 和 border-left 来设置四个方向的边框。
外边距(Margin):
外边距位于边框的外围,用于控制元素与其他元素之间的间距。外边距的大小可以通过 margin 属性来设置,也可以分别使用 margin-top 、 margin-right 、 margin-bottom 和 margin-left 来设置四个方向的外边距。
盒模型的总宽度和总高度可以通过以下公式计算:
总宽度 = width + padding-left + border-left + margin-left + padding-right + border-right + margin-right
总高度 = height + padding-top + border-top + margin-top + padding-bottom + border-bottom + margin-bottom
content-box (默认值): 根据上述公式计算总宽度和总高度。
border-box : 总宽度和总高度包括了内容、内边距和边框,但不包括外边距。这意味着 width 和 height 属性定义了元素的总高度和总高度,包括内容、内边距和边框。
响应式设计:使用媒体查询(Media Queries)和弹性布局技术,使得网页能够在不同大小的设备上自适应显示。
.responsive-container{
display:flex;
flex-wrap: wrap;
}
.responsive-item {
flex: 1 1 300px;
background: #685151;
padding: 10px;
margin: 10px;
}
@media (max-width:600px) {
.responsive-item{
flex:1 1 100%;
}
框架和模板:使用如Bootstrap、Foundation等前端框架,可以快速实现响应式和移动优先的布局。
语义化标签:使用HTML5提供的语义化标签(如 header 、 footer 、 nav 、 section 等)来构建网页结构,这些标签有助于搜索引擎优化(SEO)和无障碍访问。
五.CSS调试
END!!!
下期见....