3.CSS学习
<ol><li><div style="text-align: justify"><span style="font-size: 10pt">CSS是一种层叠样式表（样式可以叠加）</span></div></li><li><div style="text-align: justify"><span style="font-size: 10pt">为什么要用CSS
</span></div><ol><li><div style="text-align: justify"><span style="font-size: 10pt">虽然html的标签的某些属性是可以设置样式效果，可是细节处理还不够好
</span></div></li><li><div style="text-align: justify"><span style="font-size: 10pt">假如用html自带的属性来实现的样式，可能会出现很多重复代码，维护难
</span></div></li><li><div style="text-align: justify"><span style="font-size: 10pt">Css可以做到网页和内容分离，对网页的元素进行像素级的精准控制
</span></div></li></ol></li><li><div style="text-align: justify"><span style="font-size: 10pt">CSS的语法：CSS样式由选择器和和一条或多条以分号隔开的样式声明组成，每条声明的样式包含一个CSS属性和属性值
</span></div><p style="text-align: center"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174526042-1622409541.png">
</p><ol><li><div style="text-align: center"><span style="color: rgba(255, 0, 0, 1); font-size: 18pt"><strong>使用的三种模式
</strong></span></div></li><li><div style="text-align: justify"><span style="font-size: 10pt">行内样式法：将CSS样式直接写在标签的style属性中，这种会造成很多重复代码
</span></div><p><p style="color: red; font-family: 楷体;">这是一段文字</p>
</p><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174526464-502481958.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">内部样式：在html页面中的页面中开辟一段属于css的代码区域，通常是放在html的head标签中。然后通过stype属性中通过选择器来设定指定元素的css。
</span></div><p style="text-align: justify"><span style="font-size: 10pt">以下就是指定p标签的样式
</span></p><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174527327-721076605.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">通过link标签引入外联样式，即在外部新建一个css文件，所有样式都写在这个文件中。Html引用这个文件即可
</span></div><ol><li><div style="text-align: justify"><span style="font-size: 10pt">新建一个css文件夹，里面新建一个hhstyle.css文件，然后写入p标签的样式
</span></div></li></ol><p style="text-align: center"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174527884-777338741.png"><span style="font-size: 10pt">
</span></p><ol><li><div style="text-align: justify"><span style="font-size: 10pt">在html中用link标签引用css文件
</span></div><p style="text-align: justify"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174528507-1080104604.png"><span style="font-size: 10pt">
</span></p></li></ol></li></ol></li></ol><p>
</p><p>注：以上三种的方式实现的效果都是一样的，一般推荐第三种方式，把样式和html文件分开。假如这三种方式同事使用，它的优先级是由它们的代码在html中的顺序决定
</p><ol><li><div style="text-align: center"><span style="color: rgba(255, 0, 0, 1); font-size: 18pt"><strong>基本选择器
</strong></span></div></li></ol><p>选择器是用来指定某一类/某一个标签的的样式的，下面为了方便，用内部式来写
</p><ol><li><div style="text-align: justify"><span style="font-size: 10pt">通用选择器:可以设置这个页面的所有元素的属性
</span></div><p>写法：
</p><p> *{
</p><p> 样式…
</p><p> }
</p><p>下图是对所有标签的字体颜色设置
</p><p style="text-align: center"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174529038-1797018119.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">元素选择器/标签选择器：只能对指定类的标签有效
</span></div><p>写法：
</p><p> 标签名{
</p><p> 样式….
</p><p>}
</p></li></ol><p> 下图是只对div标签的字体颜色设置
</p><p style="text-align: center"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174530076-511362204.png">
</p><ol><li><div style="text-align: justify"><span style="font-size: 10pt">id选择器，对指定id属性值的标签有效
</span></div><p>写法：
</p><p> #id属性值 {
</p><p> 样式….
</p><p style="margin-left: 44pt">}
</p><p>下图是只对id为hhid的标签设置字体颜色
</p><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174530663-1622938044.png">
</p><p>注：这个id属性值最好保持整个html唯一且以数字字母下划线开头
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">class类选择器对指定class属性值的标签有效
</span></div><p style="margin-left: 4pt">写法：
</p><p style="margin-left: 4pt"> .class属性值 {
</p><p style="margin-left: 4pt"> 样式….
</p><p style="margin-left: 4pt">}
</p><p>对class值为cls的标签设置字体颜色
</p><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174531221-708375845.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">选择器的优先级以及权重
</span></div><p>行内样式style(1000) > id选择器(100) > 类选择器(10) > 元素选择器(1) > 通用选择器
</p><ol><li><div style="text-align: center"><span style="color: rgba(255, 0, 0, 1); font-size: 18pt"><strong>组合选择器
</strong></span></div></li></ol></li></ol><p>初始效果：
</p><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174531841-917766746.png">
</p><p>1、后代选择器：生效于后代（子代以及子代的子代）指定某一类型的所有的标签
</p><p> .父代的基本选择器值(class #id等) 子代标签类型{
</p><p> 属性名:属性值
</p><p style="margin-left: 84pt">}
</p><p> food 的所有后代的li标签都设置边框
</p><p style="text-align: right"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174532347-1596975856.png">
</p><p> 注意food标签下除了li标签还有ul标签，以上所设置的属性值对ul标签标签无效，因为只对li标签有效
</p><p>2、子代选择器，对其第一代的子代有效（第一代子代的子代无效）
</p><p> 写法
</p><p> .父代的基本选择器值(class #id等)> 子代标签类型{
</p><p> 属性名:属性值
</p><p style="margin-left: 84pt">}
</p><p> 以下是设置food下的第一代li标签的属性
</p><p style="text-align: center"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174532823-2109439997.png">
</p><ol><li><div style="text-align: justify"><span style="font-size: 10pt">相邻兄弟选择器：可选择紧接着在另一个元素后的元素，二者有共同的父元素，只作用与之往下相邻的<span style="color: rgba(255, 0, 0, 1)">第一个</span>，假如往下相邻的第一个不是指定的兄弟类型，则无效
</span></div></li></ol><p> .兄弟选择器值(class #id等)+ 兄弟类型{
</p><p> 属性名:属性值
</p><p style="margin-left: 84pt">}
</p><p style="text-align: justify; margin-left: 21pt"><span style="font-size: 10pt">下面是设置id为hh1的，往下相邻的第一个li标签的属性
</span></p><p style="margin-left: 21pt"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174533421-900400836.png">
</p><p style="margin-left: 21pt">假如与之相邻的不是 + 后面指定的li标签，则无效
</p><p style="margin-left: 21pt"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174533953-1575009897.png">
</p><ol><li><div style="text-align: justify"><span style="font-size: 10pt">普通兄弟选择器：可选择紧接着在另一个元素后的元素，二者有共同的父元素，只作用与之往下相邻的<span style="color: rgba(255, 0, 0, 1)">后面所有</span>
</span></div></li></ol><p> .兄弟选择器值(class #id等)~ 兄弟类型{
</p><p> 属性名:属性值
</p><p style="margin-left: 84pt">}
</p><p style="text-align: justify; margin-left: 21pt"><span style="font-size: 10pt">下面是设置id为hh2的，往下相邻的所有li标签的属性
</span></p><p style="text-align: justify; margin-left: 21pt"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174534450-570550871.png"><span style="font-size: 10pt">
</span></p><p style="text-align: justify; margin-left: 21pt"><span style="font-size: 10pt">假如中间其他隔断，后面的仍然有效
</span></p><p style="text-align: justify; margin-left: 21pt"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174534995-1791917497.png"><span style="font-size: 10pt">
</span></p><ol><li><div style="text-align: center"><span style="color: rgba(255, 0, 0, 1); font-size: 18pt"><strong>常用css样式display
</strong></span></div></li></ol><ol><li><div style="text-align: justify"><span style="font-size: 10pt">背景色以及背景图
</span></div><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174535489-1701077978.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">display属性：规定元素生成框的类型
</span></div><ol><li><div style="text-align: justify"><span style="font-size: 10pt">block：元素会被现实，且元素编程块级元素，元素前后都会有换行符
</span></div></li><li><div style="text-align: justify"><span style="font-size: 10pt">none：元素会被隐藏
</span></div></li><li><div style="text-align: justify"><span style="font-size: 10pt">inline：元素会显示为行内元素，元素前后没有换行符
</span></div></li><li><div style="text-align: justify"><span style="font-size: 10pt">inline-block：行内块级元素
</span></div><p style="text-align: justify"><span style="font-size: 10pt">注：
</span></p><p style="text-align: justify"><span style="font-size: 10pt">块级元素：可以设置元素宽高和边框，元素会自动换行
</span></p><p style="text-align: justify"><span style="font-size: 10pt">行内元素：不可以设置元素宽高和边框，元素也不会自动换行
</span></p><p style="text-align: justify"><span style="font-size: 10pt">行内块级元素：可以设置元素宽高和边框，但是不会自动换行
</span></p></li></ol></li><li><div style="text-align: justify"><span style="font-size: 10pt">span在《2、HTML学习》中已经学过，它是一个行内元素，如下图所示，它都会显示在一行上，前后都没有换行
</span></div><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174535966-1058439886.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">假如设置display为none则会隐藏
</span></div></li></ol><p style="text-align: center"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174536396-288551628.png">
<img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174536814-364444852.png">
</p><ol><li><div style="text-align: justify"><span style="font-size: 10pt">display设置为block：元素会被现实，且元素编程块级元素，元素前后都会有换行符
</span></div><p>因为前后都有换行，所以这三个会被隔开。又由于sp2设置display为block升级成了块级元素，所以可以设置宽高。Sp1还是普通的行内元素，所以对其设置宽高是不起作用的。
</p><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174537386-1773079189.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">div在《2、HTML学习》中已经学过，它是一个块级元素，如下图所示，它会独立分行显示
</span></div><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174537894-942634099.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">display设置为inline：元素会显示为行内元素，元素前后没有换行符
</span></div><p style="text-align: justify"><span style="font-size: 10pt">由于变成了行内元素，所以设置宽高对它无效
</span></p><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174538472-2041550547.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">文本标签是一个块级元素
</span></div><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174538966-1776480618.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">display设置为inline-block行内块级元素：可以设置元素宽高和边框，但是不会自动换行
</span></div></li></ol><p>
<img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174539461-1679204001.png">
</p><ol><li><div style="text-align: center"><span style="font-size: 10pt">
</span><span style="color: rgba(255, 0, 0, 1); font-size: 18pt"><strong>常用css样式 浮动
</strong></span></div></li></ol><ol><li><div style="text-align: justify"><span style="font-size: 10pt">div是块级元素，所以以下它会分行显示
</span></div></li></ol><p style="text-align: center"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174539991-1512769585.png">
</p><ol><li><div style="text-align: justify"><span style="font-size: 10pt">假如都设置为向左浮动
</span></div><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174540544-1074074373.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">都设置向右浮动
</span></div><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174541145-1006803733.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">也可以利用浮动设置文字围绕图片
</span></div></li><li><div style="text-align: justify"><span style="font-size: 10pt">初始格式
</span></div></li></ol><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174541754-85167862.png">
</p><ol><li><div style="text-align: justify"><span style="font-size: 10pt">设置浮动
</span></div></li></ol><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174542373-2124268213.png">
</p><ol><li><div style="text-align: center"><span style="color: rgba(255, 0, 0, 1); font-size: 18pt"><strong>常用css样式 border
</strong></span></div></li></ol><ol><li><div style="text-align: justify"><span style="font-size: 10pt">设置边框样式，边框有4条边，也可以单独设置某一条边的样式
</span></div></li></ol><p style="text-align: center">
<img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174542912-1430150379.png">
</p><p>
</p><ol><li><div style="text-align: center"><span style="color: rgba(255, 0, 0, 1); font-size: 18pt"><strong>盒子模型padding
</strong></span></div></li></ol><p style="text-align: right"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174543429-451767143.png">
</p><ol><li><div style="text-align: justify"><span style="font-size: 10pt">修改padding效果发现上下左右都有一个比较大的间距了:
</span></div><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174543929-1145633386.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">选中元素可以查看盒子模型各个值
</span></div></li></ol><p style="text-align: center"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174544476-598654939.png">
</p><ol><li><div style="text-align: center"><span style="color: rgba(255, 0, 0, 1); font-size: 18pt"><strong>盒子模型margin
</strong></span></div></li></ol><ol><li><div style="text-align: justify"><span style="font-size: 10pt">原始状态
</span></div></li></ol><p style="text-align: center"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174544937-798162649.png">
</p><ol><li><div style="text-align: justify"><span style="font-size: 10pt">添加margin后
</span></div><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174545431-664635554.png">
</p></li><li><div style="text-align: justify"><span style="font-size: 10pt">右键点击文本2，即可以看到它样式的盒子模型
</span></div></li></ol><p style="text-align: center"><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174545975-959977828.png">
</p><ol><li><div style="text-align: justify"><span style="font-size: 10pt">它也是组合的，上下左右的边距都可以设置
</span></div><p><img src="https://img2022.cnblogs.com/blog/2088670/202209/2088670-20220913174546511-175798585.png"></p></li></ol><br><br>
来源：https://www.cnblogs.com/ihh2021/p/16690084.html
頁:
[1]