CSS简介简介

时间：2023-03-30 22:34:04 CSS

body{background-color:red}p{margin-left:20px}一、CSS简介与参考一、CSS概述CSS中文翻译为CascadingStyleSheet，用于控制网页的样式。2.如何使用样式当浏览器读取样式表时，它会根据样式表对文档进行格式化。插入样式表的三种方式：1.外部样式表内部样式表body{background-color:red}p{margin-left:20px}内联样式Thisisaparagraph

3.css样式表的优先级内联样式表的优先级最高内部样式表与外部样式表的优先级和书写顺序有关，越靠后的优先级越高。二、CSS基本语法1、CSS语法h1{color:red;font-size:14px;}CSS规则由两个主要部分组成：选择器和一个或多个声明。选择器：通常是需要设置样式的HTML元素。声明：使用大括号将声明括起来。提示：如果要定义多个声明，则需要用分号分隔每个声明。p{文本对齐：居中；color:red;}2.记得写引号：如果value是几个字，需要给value加上引号：p{font-family:"sansserif";}3.css选择器1.标签选择器(h1)h1{颜色：红色；font-size:14px;}2、通配符选择器（*）语法：*{attribute:属性值;}，表示所有元素；这意味着该样式适用于所有网页元素*{margin:0;color:#ff0;}3。组选择器(h1,h2,h3)h1,h2,h3,h4,h5,h6{color:green;}4.派生选择器：根据元素所在位置的上下文定义样式：后代选择器(空格)listrong{color:red;}子元素选择器(>)span>strong{color:blue;}相邻兄弟选择器(+)如果您需要选择紧接在具有相同父元素的另一个元素之后的元素，您可以使用相邻兄弟选择器。例如，如果要增加紧跟在h1元素之后的段落的上边距，可以这样写：divh6+p{margin-top:50px;}

Thisisaheading.

这是段落。

id选择器（#）为标有特定id的HTML元素指定特定的样式，id属性在每个HTML文档中只能出现一次。例如：身份证号码。#redColor{background-color:red;}#greenColor{background-color:green;}我有一个redColor的id

我有一个id,是greenColor

命名规范：1）只允许字母（大小写均可，严格区分），下划线和数字。也就是说，id="laoHe"和id="laohe"并不冲突。2)只允许以字母开头的字母。3）命名没有长度限制，可以是1个字母，也可以是多个。但是，不建议太长。4)不允许使用标签名称（不是硬性规定，而是工作经验的体现）6.类选择器(.)类选择器以点号显示：.goCenter{text-align:center;background-color:gray;}div,p,h2,elements都有goCenter类。这意味着两者都将遵守“.goCenter”选择器中的规则。我和我哥有一个共同的班级，goCenter

我和我哥有一个共同的班级，goCenter

我和弟弟有一个共同的班级，就是goCenter注意：班级名的第一个字符不能是数字！伪类选择器(:)CSS伪类用于为某些选择器添加特殊效果。伪类，状态是动态的，当一个元素达到某个状态时，可能会得到一个样式，当状态发生变化时，就失去这个样式。例如，含羞草。1)、focus选择获得焦点的input元素。2):link,:visited,:hover,:active链接的不同状态可以有不同的显示方式，这些状态包括：激活状态、访问状态、未访问状态和鼠标悬停状态。a:link{color:#FF0000}/*未访问过的链接*/a:visited{color:#00FF00}/*已访问过的链接*/a:hover{color:#FF00FF}/*鼠标移动到链接上*/a:active{color:#0000FF}/*选中的链接*/注意：a:hover必须放在a:link和a:visited之后才有效。注意：a:active必须放在a:hover之后才有效。伪元素选择器(:)语法：selector::pseudo-element/selector:pseudo-element伪元素是控件内容，用于为文档的一部分（伪）元素定义样式，以严格区分伪元素-来自伪类的元素，CSS3重新定义了以双冒号开头的伪元素。1):first-line和:first-letter用于为文本的第一行和首字母设置特殊样式，该伪元素只能应用于块级元素。细雨淅沥，打湿了一些新衣服。最无助的飞燕，春冬不归，像人生的雨，飘来飘去，像那一株浮萍，无根游荡。曾几何时，有“细雨不见湿衣裳，闲花落地闻声”的悠然体验，也有“竹签与草鞋轻打马，一生一云烟雨”。生活中总有太多无奈的事情，羁绊和执念，总会影响着我们淡漠的生活。我们常常想，是否有一天自己也能像水一样，清澈纯净，像白云一样洒脱。

/*伪元素：first-line*/#article:first-line{color:red;}/*伪元素：first-letter*/#article:first-letter{color:blue;}2):first-child选择元素的第一个子元素p:first-child{font-size:30px;}li:first-child{font-size:30px;}

文本中的第一个P标签

文中第一个li标签
文中第二个li标签
文中第三个li标签

文中第二个P标签

3):before定义元素的第一个（虚构的）子元素的内容，通常带有content属性。语法：选择器：before{content:value;}4):after定义元素的最后一个（虚构的）子元素的内容，通常带有content属性。语法：选择器：在{内容：值之后；}5)内容描述：content属性通常与伪元素选择器:before或:after一起使用，主要用于为伪元素生成内容。语法：{内容：值；}四、CSS注释CSS注释格式：/注释内容/