企业网站建设 优化,flashfxp连接wordpress,crm免费永久使用,广安网站建设【一】CSS基础
【1】什么是CSS
CSS#xff08;层叠样式表#xff09;是一种用于描述HTML#xff08;超文本标记语言#xff09;文档外观样式的语言。它通过定义样式规则来控制网页的布局、字体、颜色、背景等外观效果#xff0c;使网页变得更加美观和可读。
【2】注释语…【一】CSS基础
【1】什么是CSS
CSS层叠样式表是一种用于描述HTML超文本标记语言文档外观样式的语言。它通过定义样式规则来控制网页的布局、字体、颜色、背景等外观效果使网页变得更加美观和可读。
【2】注释语法
在CSS中注释可以用来添加说明、注解或者暂时禁用一些代码。注释在CSS文件中不会被浏览器解析和显示。注释以/*开始以*/结束之间的内容将被视为注释。
/* 注释内容 */【3】语法结构
CSS的语法结构由选择符和声明块组成。选择符指定要应用样式的HTML元素或者元素组。例如可以使用标签名、类名、ID等作为选择符。声明块由一对花括号{}包围包含了一条或多条样式声明。每条样式声明由一个样式属性和对应的样式属性值组成用冒号:分隔。多个样式属性之间用分号;分隔。
选择符 {样式属性: 样式属性值;样式属性: 样式属性值, 样式属性值, 样式属性值;
}在实际的CSS文件中通常会有大量的样式规则可以根据需要对不同的HTML元素进行样式定义使网页达到所需的外观效果。当CSS样式规则较多时可以使用注释来辅助辨别和查找提高代码的可读性和维护性。
【4】css的三种引入方式
1行内式
在HTML标签内部使用style属性直接编写CSS样式。这种方式将HTML和CSS混合在一起增加了耦合度一般不推荐使用。
h1 stylecolor: blue注册页面/h12style标签内部直接书写
在HTML文件的head标签内部使用style标签直接编写CSS代码。这种方式适合于简单的样式定义方便查看和修改。
headstyle/*蓝色一级标题*/h1 {color: blue;}/style
/head3引入外部CSS文件
在HTML文件的head标签内使用link标签引入外部CSS文件。这是最正规的方式可以将CSS代码与HTML代码分离提高代码的可维护性和复用性。
!--html文件--
!DOCTYPE html
html
headtitle页面标题/titlemeta charsetUTF8link relstylesheet hreftest.css
/head
body
h1注册页面/h1
/body
/html/*test.css文件*/
h1 {color: blue;
}【二】选择器
【1】基本选择器
在CSS中选择器用于选取HTML文档中的元素并将样式应用于这些元素。选择器根据其类型和语法的不同可以选择不同的元素。
1元素/标签选择器Element/Tag Selector
通过HTML元素的标签名选择元素。例h1选择器选取所有h1标签元素。
/* 元素/标签选择器 */
h1 {/*一级标签为蓝色*/color: blue;
}2类选择器Class Selector
通过HTML元素的class属性选择元素。类选择器以.开头后面跟随类名。例.highlight选择器选取所有具有classhighlight的元素。
/* 类选择器 */
.highlight {/*类为hightlight的背景设为黄色*/background-color: yellow;
}3ID选择器ID Selector
通过HTML元素的id属性选择元素。ID选择器以#开头后面跟随ID名。例#header选择器选取具有idheader的元素。
/* ID选择器 */
#header {/*ID为header的字体为24像素*/font-size: 24px;
}4通用选择器Universal Selector
选择所有的HTML元素。通用选择器使用*表示。例*选择器选取所有元素。
/* 通用选择器 */
* {/*所有元素的内外边距都设为0*/margin: 0;padding: 0;
}【2】组合选择器
组合选择器是CSS中用于选择特定元素关系的选择器。常见的组合选择器包括后代选择器、儿子选择器、毗邻选择器和弟弟选择器。
1后代选择器Descendant Selector
使用空格表示选择某个元素的后代元素。例div p选择器选取所有在div标签内部的p标签元素。
2儿子选择器Child Selector
使用符号表示选择某个元素的直接子元素。例div span选择器选取所有直接作为div标签子元素的span标签元素。
3毗邻选择器Adjacent Sibling Selector
使用符号表示选择某个元素的下一个紧邻的兄弟元素。例div a选择器选取紧跟在div标签后面的第一个a标签元素。
4弟弟选择器General Sibling Selector
使用~符号表示选择某个元素之后的所有兄弟元素。例如div ~ a选择器选取所有在div标签后面的a标签元素。
5示例说明
div idd1div1div idd2div2pp1/p/divpp2spanspan1/span/pspanspan2/span
/div对于div1来说div2、p2、span2都是儿子。对于div2、p2、span2来说div1是父亲。对于p1来说div2是父亲div1是爷爷可以将div1和div2统称为祖先。对于span2来说div2、p2是哥哥span2是弟弟。div1内部所有的标签无论层级如何都可以称之为div1的后代。
/* 1.儿子选择器关键符号是大于号 */
#d1 span {/* 选择id为d1的标签内部所有的儿子span */color: red;
}/* 2.后代选择器关键符号是空格 */
#d1 span {/* 选择id为d1的标签内部所有的后代span */color: blue;
}/* 3.毗邻选择器关键符号是加号 */
#d2 p {/* 选择id为d1的标签同级别下面紧挨着第一个p标签 */color: green;
}/* 4.弟弟选择器关键符号是小波浪号 */
#d2 ~ p {/* 选择id为d1的标签同级别下面所有p标签 */color: brown;
}【3】属性选择器
属性选择器是CSS中用于选择具有特定属性的元素的选择器。属性选择器可以根据属性的存在、属性值的匹配等条件来选择元素。
1含有某个属性
选择具有指定属性的元素。例[type]选择器选取所有具有type属性的元素。
2含有某个属性并且有某个值
选择具有指定属性且属性值与指定值匹配的元素。例[typetext]选择器选取所有type属性值为text的元素。
3含有某个属性并且有某个值的某个标签
选择某个标签内具有指定属性且属性值与指定值匹配的元素。例div[typetext]选择器选取所有div标签内具有type属性值为text的元素。
【4】选择器分组和嵌套
1分组
分组选择器允许同时选择多个不同类型的元素并为它们应用相同的样式。分组选择器使用逗号 , 将不同的选择器进行分隔。
div, p, span {color: red;
}2嵌套
嵌套选择器允许选择某个元素内部的特定元素。
.container {background-color: green;/* 选择 .container 元素内部的 .box 元素 */.box {background-color: yellow;}
}【5】伪类选择器 伪类选择器是 CSS 中用于选择元素的特殊选择器 根据元素的状态或位置选择元素而不仅仅是根据元素本身的标记名、类名或其他属性来选择。
1:hover
选择鼠标悬停在元素上的状态。可以用来添加鼠标悬停时的样式效果。
/*鼠标悬停在链接上时将链接的文本颜色设置为红色*/
a:hover {color: red;
}2:active
选择元素被激活被点击的状态。通常用于给按钮或链接添加点击效果。
/*按钮被点击时将按钮的背景颜色设置为蓝色*/
button:active {background-color: blue;
}3:focus
选择当前获得焦点的元素。适用于表单元素当用户点击或使用 Tab 键导航时元素会获得焦点。
/*输入框获得焦点时将边框颜色设置为绿色*/
input:focus {border-color: green;
}4:first-child
选择作为其父元素的第一个子元素的元素。可以用来选择列表中的第一个元素或某个容器中的第一个子元素。
/*将选择无序列表中的第一个列表项并将其文本设置为粗体*/
ul li:first-child {font-weight: bold;
}5:last-child
选择作为其父元素的最后一个子元素的元素。类似于 :first-child但选择的是最后一个子元素。
/*将选择无序列表中的最后一个列表项并将其文本颜色设置为紫色*/
ul li:last-child {color: purple;
}6:nth-child(n)
选择作为其父元素的第 n 个子元素的元素。可以使用具体的数字、关键字如 even 表示偶数odd 表示奇数或者公式来选择特定的子元素。
/*将选择无序列表中的奇数位置的列表项并将它们的背景颜色设置为浅灰色*/
ul li:nth-child(odd) {background-color: lightgray;
}【6】伪元素选择器
伪元素选择器允许在元素的特定部分之前或之后插入内容并对其进行样式化。它们以双冒号 :: 开头并用于选择元素的虚拟部分而不是实际存在于 DOM 中的元素。befor 和 after 通常都是用来清除浮动带来的影响即父标签塌陷的问题
1::before
在选定元素的内容之前插入生成的内容。可以用于添加装饰性的内容如图标或装饰符号。
/*在每个p元素的内容之前插入并将其颜色设置为红色*/
p::before {content: ;color: red;
}2::after
在选定元素的内容之后插入生成的内容。可以用于添加额外的内容或装饰性元素。
/*在每个链接的内容之后插入 (外部链接)并将其样式设置为斜体*/
a::after {content: (外部链接);font-style: italic;
}3::first-line
选择元素的第一行文本。可以用于对段落的第一行或标题的第一行应用特殊样式。
/*将标题元素的第一行文本设置为 24 像素大小和粗体*/
h1::first-line {font-size: 24px;font-weight: bold;
}4::selection
选择用户选择的文本部分。可以用于自定义用户选择文本的样式。
/*将用户选择的文本的背景颜色设置为黄色文本颜色设置为黑色*/
::selection {background-color: yellow;color: black;
}5::first-letter
选择元素的第一个字母或第一个字符并对其应用样式。这个选择器可以用于段落、标题、列表项等元素。
/*每个段落的第一个字母字体大小设置为 24 像素颜色设置为红色并使其向左浮动*/
p::first-letter {font-size: 24px;color: red;float: left;
}【7】选择器优先级
选择器优先级是用于确定在多个选择器应用于同一个元素时哪个选择器的样式将具有更高的优先级。优先级是根据选择器的特定组合和权重来计算的一般情况下优先级越高的选择器的样式将被应用。
1选择器不同
内联样式具有最高优先级的是直接应用在元素上的内联样式。内联样式是通过元素的 style 属性来定义的。ID 选择器ID 选择器具有比大多数其他选择器更高的优先级。ID 选择器以 # 符号开头后面跟着元素的唯一标识符。类选择器、属性选择器和伪类选择器这些选择器具有相同的优先级它们以 .、[] 或 : 开头。元素选择器和伪元素选择器这些选择器具有最低的优先级。元素选择器是指对元素类型进行选择而伪元素选择器以 :: 开头。
2选择器相同
就近原则
