成都成华网站建设,跟网站开发公司签合同主要要点,wordpress大学教程课件,个人做金融网站能赚钱吗前端CSS基础2#xff08;CSS基本选择器和复合选择器#xff09; HTML和HTML的区别和联系HTML元素和CSS属性CSS基本选择器ID选择器类选择器标签选择器群组选择器通配选择器层次选择器属性选择器伪类选择器伪元素选择器 CSS复合选择器交集选择器并集选择器后代选择器子元素选择… 前端CSS基础2CSS基本选择器和复合选择器 HTML和HTML的区别和联系HTML元素和CSS属性CSS基本选择器ID选择器类选择器标签选择器群组选择器通配选择器层次选择器属性选择器伪类选择器伪元素选择器 CSS复合选择器交集选择器并集选择器后代选择器子元素选择器兄弟选择器属性选择器 HTML和HTML的区别和联系
HTML和CSS是构建网页的基石它们各自承担着不同的角色但又紧密相连。以下是它们的主要区别和联系
区别
HTMLHyperText Markup Language是一种标记语言负责创建和组织网页的结构和内容。它使用一系列标签来定义标题、段落、列表、链接等元素构成了网页的基本骨架。CSSCascading Style Sheets是一种样式表语言用于指定HTML元素的外观和布局。它允许开发者为HTML页面中的元素设置颜色、字体、大小、间距等视觉样式。联系HTML提供了网页的结构而CSS则提供了这些结构的样式。没有CSS网页将缺乏视觉效果和美观的布局没有HTML网页将没有内容和结构。CSS通过选择器来定位HTML文档中的元素并应用样式。这意味着CSS依赖于HTML元素的标签或类名、ID等属性来施加样式。实际应用在开发过程中HTML和CSS通常需要配合使用。例如HTML用于创建一个新闻文章的页面结构包括标题、作者、日期和文章内容等而CSS则用于设置这些元素的字体、颜色、布局等以确保页面既易读又吸引人。
总结来说HTML和CSS虽然有着不同的职责但它们共同协作使得静态的HTML结构变得生动且具有吸引力。在现代网页设计和开发中两者缺一不可。
HTML元素和CSS属性
CSS属性是用于定义HTML元素的视觉样式和布局的规范而元素则是HTML页面中的基本构成单位。
首先让我们来了解CSS属性
字体属性这些属性包括font-family字体系列、font-size字体大小、font-weight字体粗细等它们控制文本的显示方式。颜色和背景属性例如color文本颜色、background-color背景颜色等这些属性定义了元素的颜色。布局属性如display、position、float等它们影响着元素在页面上的布局。尺寸属性包括width、height、margin、padding等这些属性决定了元素的尺寸和间距。边框属性像border-style、border-width、border-color等用于设置元素的边框样式。其他视觉属性还有如text-align文本对齐方式、text-decoration文本装饰等也是CSS的一部分。
接下来我们来看HTML元素
块级元素如div、p段落、h1到h6标题等它们通常独占一行可以设置宽度和高度。内联元素如span、a链接、em强调等它们不独占一行宽度随内容而定。空元素如br换行、img图像、input输入框等这些元素为空元素因为它们没有闭合标签。表单元素如form、textarea、button等用于创建用户交互的表单。
综上所述CSS属性和HTML元素共同构成了网页的结构和样式。通过CSS属性开发者可以为HTML元素应用各种样式从而创造出丰富多样的网页设计。
CSS基本选择器
CSS基本选择器主要包括ID选择器、类选择器、标签选择器、群组选择器、通配选择器、层次选择器、属性选择器以及伪类和伪元素选择器。
ID选择器
通过元素的ID来选取元素例如#myID。它在文档中是唯一的常用于选取页面中唯一的元素。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title欧买噶的CSS学习/titlestyle#love{color: red;}#dislike{color:black;}/style/head
bodyh2 idlove我爱你/h2h2 iddislike我不喜欢你/h2
/body
/html注意1、id属性值尽量由字母数字下划线短杠组成最好以字母开头不要包括空格区分大小写。 2、一个元素只能拥有一个Id属性多个元素id属性值不能相同。 3、一个元素可以同时拥有id和class属性。
类选择器
通过元素的类名来选取元素例如.myClass。类选择器可以应用于多个元素非常适合用于选取具有共同样式的一组元素。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title欧买噶的CSS学习/titlestyle.a{color:red;}.b{color: green;}/style
bodyp classa1/pspan classa 2/spanp classa3/pp classb10/pp classb20/pp classb30/p
/body
/html注意 元素的class属性值不带. 但css的类选择器要带. class的值是自定义的尽量用英文与数字的组合且命名要有意义。 一个元素不能写多个class属性
标签选择器
直接使用HTML标签名称来选取元素例如p。它会选择页面上所有的该标签元素。 styleh2{color:orange;font-size: 40px;}/style所有的h2标签的元素都变成该类型该颜色大小。
群组选择器
可以将多个选择器放在一起以应用相同的样式规则例如.class1, #id2, element。这样可以减少代码重复并使得样式更加整洁。
通配选择器
使用星号*来选取所有元素例如*。通常用于重置所有元素的样式或设置全局样式。 style*{color:orange;font-size: 40px;}选中所有的HTML元素所有的设置都为该类型。
层次选择器
利用空格 来选取元素的子元素例如div p会选择div内的所有p元素。
属性选择器
根据元素的属性和属性值来选取元素例如[typetext]会选择所有input元素中type属性为text的元素。
伪类选择器
根据元素的特定状态来选取元素例如:hover用于选取鼠标悬停时的元素。
伪元素选择器
选取元素的特定部分例如::first-line用于选取元素的第一行文本。
这些基本选择器是CSS样式化页面的基础它们可以单独使用也可以与其他选择器组合使用以实现更复杂的样式选择。在实际开发中合理地使用这些选择器可以提高样式的精确度和效率。
CSS复合选择器
交集选择器
CSS交集选择器是一种用于选取两个或多个选择器共同选中的元素的选择器。它由两个或多个选择器组成这些选择器之间用空格分隔。只有当元素同时满足所有选择器的条件时才会被选中并应用样式。
例如以下是一个使用交集选择器的CSS规则
div.classA {color: red;
}在这个例子中div 和 .classA 都是选择器它们之间用空格分隔。这个规则将选中所有同时满足以下条件的
元素 1、它是一个 元素 2、它有一个名为 classA 的类。 只有当这两个条件都满足时元素的文本颜色才会被设置为红色。 !--类--.b{color: green;}!--交集选择器标签且类名--p.yanse{color: green;}!--类的使用--p classb30/p!--交集选择器的使用--p classyanse绿色/p
多个选择器 !--交集选择器标签且类名且id--p.yanse#ls{color: green;}!--交集选择器的使用--p classyanse idls绿色/p并集选择器
并集选择器是一种CSS选择器用于选取满足任一条件的元素。具体来说并集选择器允许你指定多个选择器然后选取这些选择器中的任何一个所匹配的元素。 并集选择器的使用方法是将多个选择器用逗号,分隔开来。
p, .classA {/* 这里是你的样式规则 */
}
!--想选择所有的p元素以及所有的带有.classA类的div元素
在这个例子中无论是p标签还是带有.classA类的div标签
只要满足其中一个条件该样式规则就会应用到该元素上--这与交集选择器不同交集选择器要求元素必须同时满足所有指定的条件。就是或者的意思。
后代选择器
后代选择器是CSS中常用的一种选择器它用于选取一个元素的所有后代元素不论这些后代元素被嵌套的层次有多深。 语法与应用 基本语法后代选择器的语法格式是ancestor descendant其中ancestor代表祖先元素descendant代表后代元素。用空格分割开来
style
div p
{color:red;
}
/style
表示选择所有在div元素内部的p元素的文本颜色为红色无论它们被嵌套得多深。具体应用后代选择器可以用于为祖先元素内的特定后代元素设置样式。 与其他选择器的区别后代选择器与子元素选择器不同子元素使用符号来指定直接子元素。而后代选择器不限制代数它将选中所有层级的后代元素。
子元素选择器
子代选择器的使用方法是在父元素和子元素之间用大于号隔开。这与后代选择器不同后者使用空格来分隔选择器会选择所有层级的后代元素。子代选择器更加具体它只会选择那些直接作为指定元素子元素的元素。
!--例如如果你想要选择一个div元素直接包含的所有p元素而不是这个div元素内其他元素间接包含的p元素你可以使用这样的规则--
div p {/* 这里是我们的样式规则 */
}
.persona
{
color:red;
}语法选择器1选择器2选择器3…选择器n选择器1234…n可以是任何一种选择器。
兄弟选择器
相邻兄弟选择器Adjacent sibling selector是CSS中的一种选择器它允许你选择那些与指定元素具有相同父元素并紧跟在其后面的兄弟元素。这种选择器的语法是在两个选择器之间使用加号。 语法选择器1选择器2 { }
!--例如如果你想要选择一个紧接在div元素后的p元素你可以使用以下规则--
divp
{
color:red;
}通用兄弟选择器 通用兄弟选择器的语法是使用波浪号~来表示它位于两个选择器之间。这种选择器会选择所有与指定元素具有相同父元素的其他子元素不论它们在HTML代码中的顺序如何。
html
divp这是一个段落。/pspan这是一个span元素。/spana href#这是一个链接。/a
/div
!--我们想要选择所有p元素的同级元素可以使用以下CSS规则--
style
p~span,
p~a {/* 这里是你的样式规则 */
}
/style属性选择器
CSS属性选择器可以根据元素的特定属性或属性值来应用样式而不仅仅是通过class和id。
属性选择器的使用方式如下
针对具有特定属性的元素可以简单地通过将属性名放入一对方括号中来选择具有该属性的所有元素。例如要将所有带有title属性的元素的文本颜色变为蓝色可以使用以下规则[title] {color: blue;
}
a hrefhttps://www.example.com title这是一个示例网站点击访问示例网站/a
div titlehhhhh欧买噶/div/*选中具有title属性且属性值以字母a开头的元素*/[title^a]
{color:aliceblue;
}/*选中具有title属性且属性值以字母b结尾的元素*/[title$b]
{color:aliceblue;
}/*选中具有title属性且属性值含有u的元素*/[title*u]
{color:aliceblue;
} 针对特定属性和值的元素如果想要更精确地选择具有特定属性值的元素可以在方括号中指定属性名和值。例如要选择title属性值为runoob的元素并为其添加边框样式可以使用以下规则[titlehhhhh] {border: 5px solid green;
}div titlehhhhh欧买噶/div 多值属性选择对于包含多个值的属性可以使用波浪号~或管道符|来匹配。例如要选择title属性中包含hello值的元素或者lang属性值为en的元素可以使用以下规则[title~hello] {color: blue;
}
[lang|en] {color: blue;
}在表单元素中使用属性选择器特别适用于表单元素的样式设计无需使用class或id即可对特定类型的输入框进行样式化。例如要为所有required属性的输入框添加特殊样式可以使用以下规则input[required] {background-color: yellow;
}需要注意的是IE7和IE8需要声明DOCTYPE才支持属性选择器而IE6及更低版本的浏览器不支持属性选择器。在使用属性选择器时应确保目标浏览器支持该特性或者提供适当的后备方案。
