分组与嵌套

不同选择器可以组合来使用如：

div,p,span{color:red;} #将div,p,span元素的文本设置为红色 #d1,.c1,span{color:yellow;} #将id为d1，类为c1，和span元素全部变为黄色 #d1 .c1,span{color:orange;} #将在ID为d1的元素内部的类名为c1的元素以及所有span元素的文本颜色都设置为橙色。

伪类选择器

a:link{color:red;} /*访问之前的状态*/ a:hover{color:aqua;} /*鼠标悬浮态*/ a:active{color:black;}/*鼠标点击不松开的状态 激活态*/ a:visite我爱线报网d{color:darkgray;}/*访问之后的状态*/ input:focus{background-color:red;} /*input框获取焦点（鼠标点了input框后显示的东西）*/

伪元素选择器

p:first-letter{ /*给第一个字调样式*/ font-size:48px; color:orange} p:before{content:“开头添加的”; /*在文本开头用css添加内容 这样添加的内容是无法选中的*/ color:blue} p:after{content:“后面添加”;} /*往后面添加css文本*/ ps:before和after通常都是用来清除浮动带来的影响和父标签塌陷的问题我爱线报网

选择器优先级

1、选择器相同,书写顺序不同。

就近原则：谁离标签更近就听谁的。

2、选择器不同

精确度越高优先级就越高：

行内选择器>id选择器>类选择器>标签选择器

css属性相关（操作标签样式）

1、长宽的设置

<style> p{background-color:red; height:200px; width:400px} span{background-color:red; height:200px; width:400px} </style>

background-color是背景色的意思。

只有块级标签可以设置长宽，span标签不是块级标签，正常情况下设置了也不会生效。

2、字体属性

<style> p{fo我爱线报网nt-family:Arial Black; /*调整字体样式*/ font-size：24px; /*调整字体大小*/ font-weight：bold; /*调整字体自重 bolder lighter inherit继承父元素的粗细值 100-900*/ color:rgb(188,237,163); /*可以写英文单词，也可以写颜色标号，也可以写三原色0~255,也可以使用rgba来额外添加透明度（0-1）。*/ /*可以使用截图功能来获取你想要的颜色编号*/ } </style>

3、文字属性

<style> p{text-align:center;/*居中*/ /* right我爱线报网右对齐 left左对齐 justify两端对齐 */ text-decoration:underline;/*下划线*/ /* overline头顶的线 line-through删除线 none没有样式：可以用来去掉a标签的下划线 */ font-size:16px; text-indent:32px/*加缩进*/ } </style>

4、背景属性

<style> div {height:400px; width:400px; background-我爱线报网color:red; background-image:url(“111.jpg”);/*添加背景图片*/ background-repeat:no-repeat; /*默认是repeat（全部铺满背景），no-repeat是不铺满，还可以x-repeat（x轴铺满），y-repeat*/ /*其实浏览器不是一个平面，是一个三维立体结构，有xyz3三个轴*/ background-position:center center; /*控制图片位置：第一个是左间距，第二个是上间距*/ /*遇到前缀是一样的都可以简写，简写方式为：background: red url(“111.jpg”) no-repeat c我爱线报网enter center;*/ } </style>

5、边框

<style> p{background-color:red; border-width:5px; /*边框的宽度*/ border-style:solid; /*样式*/ border-color:green;/*颜色*/ } /*可以单独给任意一条边框来设置样式*/ div{ border-left-width:5px; border-left-color:red; border-left-style:dotted; border-right-width:10px; border-right-color:blue; border-right-style:solid我爱线报网;border-top-width:15px; border-top-color:yellow; border-top-style:dashed; border-bottom-width:20px; border-bottom-color:deeppink; border-bottom-style:dashed; } span{border-radius:50%;background-color:red} /*radius：画圆*/

6、display属性：

#d1{display:none;}/*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*/

none 隐藏标签

inl我爱线报网ine 将标签设置为行内标签的特点

block 将标签设置成块级标签的特点

inline-block 将上面两个整合

visibility：hidden #单纯的隐藏，但位置还在

盒子模型：

盒子模型是指在网页设计中，将HTML元素看作是一个矩形的盒子，它由四个部分组成：内容区域、内边距、边框和外边距。这些部分共同决定了一个元素在页面中所占的空间和布局。

具体来说，盒子模型的四个部分包括：

1、内容区域（Content）：指元素内部的实际内容，比如文本、图像等。

2、内边距（Padding）：指内容区域与边框之间的空白区域。它可以用来控制元素内容与边框之间的间距。

3、边框（Border）：指围绕在内容区域和内我爱线报网边距外部的线条。它可以用来设置元素的边框样式、颜色和宽度。

4、外边距（Margin）：指元素与相邻元素之间的空白区域。它可以用来控制元素与其他元素之间的间距。

如果你想要调整标签与标签之间的距离的话，你就可以调整margin。

p{ margin-left:0; margin-top:0; margin-right:0; margin-bottom:0; /*padding的用法也是和margin一样的，margin-l、t、r..，简写的顺序也是一样的*/ }

body自带8像素的margin，一般情况下，我们在写页面的时候，上来就会先将body的margin去除

body{margin:0}

简写的顺序：

div我爱线报网{ margin:0; /*上下左右都是0*/ margin:10px 20px; /*第一个是上下的距离，第二个是左右*/ margin:10px 20px 30px; /* 上、左右、下*/ margin:10px 20px 30px 40px; /*上、右、下、左*/ }

浮动：

浮动（Float）是CSS中的一种布局属性，用于控制元素在页面中的位置。

使用浮动属性可以让元素脱离正常的文档流，并向左或向右浮动。浮动元素会尽量靠近容器的左侧或右侧，并与其后的内容进行相应的排列。

常见的浮动属性值包括：

float: left;：将元素向左浮动。

float: right;：将元素向右浮动。

float: none;：取消元素的浮动。我爱线报网

给力项目：线报网会员可免费下载 加入会员
友情提醒： 请尽量登录购买，防止付款了不发货！
QQ交流群：226333560 站长微信：qgzmt2

温馨提示：本站提供的一切软件、教程和内容信息都来自网络收集整理，仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，版权争议与本站无关。用户必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！