CSS简单介绍

最新推荐文章于 2022-03-16 13:07:53 发布

无；忧

最新推荐文章于 2022-03-16 13:07:53 发布

阅读量234

点赞数

分类专栏： JavaWeb 文章标签： css

本文链接：https://blog.csdn.net/weixin_52284319/article/details/112167905

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS样式在网页美化和布局控制中的应用，包括层叠、选择器、文本及背景样式、边框与盒子模型等内容。重点讨论了CSS的三种样式引入方式、选择器类型以及各种定位方式，如相对定位、绝对定位和固定定位，同时还涉及到了CSS在页面元素布局中的重要角色和影响。

摘要由CSDN通过智能技术生成

CSS样式

进行页面美化，布局控制

概念

Cascading Style Sheet 层叠样式表，

层叠：多个样式可以作用在同一个html的元素上，可以同时生效。

好处

功能比较强大，
将内容展示和样式控制进行分离
- 降低耦合度，解耦
- 分工协作更方便
- 提高css样式的可复用性

使用：

般情况下有三种方式表达CSS样式

内部样式(内联式),一般存放的位置在head标签内,需要借助标签style
行内样式,直接在标签的内部通过style属性进行样式控制
外联式,单独创建一个CSS文件,文件的命名格式为:xxx.css,在head标签内通过link标签进行关联,

常用的是第三种

<style type="text/css">
    选择器{
        属性1:属性值;
        属性2:属性值;
        属性3:属性值1 属性值2 属性值3 ...;
        ...
    }    
</style>

注意：

选择器严格区分大小写，属性和属性值不区分大小写，属性和属性之间使用分号隔开，最后一个属性可以省略不写，如果一个属性有多个属性值，多个属性值之间用空格隔开，type属性可以省略不写。
如果一个标签有多个css样式控制，按照就近原则进行覆盖
css三种样式：行内样式>内联式>外联式

CSS选择器

当我们想要设置某些标签的样式时，就必须让css代码找到对应的标签，通过选择器找到对应的标签

常用的选择器

标签选择器，语法格式：标签名称{} 如对div标签控制 --> div{}
id选择器，语法格式：#id名称{} ，注意id一般不能重复，需要个标签添加一个id属性
类选择器，语法格式：.class名称{} ，class名称可以重复，需要个标签添加class属性
并集选择器，语法格式：选择器1,选择器2,选择器3,...{} ，
属性选择器，语法格式：标签[属性=“具体的属性值”]{}，比如：input[type=“text”] -->username输入框设定样式，input[type=“possword”] --> 控制password密码输入框设定样式
后代选择器，语法格式：选择器1 选择器2{} ，浏览器加载样式的时候会首先找选择器1对应的标签在不在，如果存在会找选择器1里面嵌套的选择器2对应的标签。

不太常用的选择器

子元素选择器，语法格式：选择器1>选择器2{} ，浏览器会加载选择器1下的所有子元素符合选择器2的条件，
交集选择器，语法格式：选择器1选择器2{} ，要求标签同时具备选择器1和选择器2里面的css样式才会起作用。
相邻兄弟选择器，语法格式：选择器1+选择器2
通用兄弟选择器，语法格式：选择器1~选择器2{}
选中同级别的对一个标签，语法格式：标签:first-child{}
选中同级别同类型的第一个标签，语法格式：标签:first-of-type{}
选中同级别同类型的最后一个标签，语法格式：标签:last-of-type{}
选中同级别的第几个标签，语法格式：nth-child(n){} ，n第几个
选中同级别同类型的第几个标签，语法格式：标签:nth-of-type(n){}

样式

文本系列样式

用于设置文本相关的一些样式

font-style：设置文字样式，常用取值为斜体italic和正常normal
font-weight：设置文字的粗细，常用取值light，lighter，bold，bolder和正常normal。还可以使用数字表示100~900
font-size：设置文字的大小，取值单位为像素px，如：font-size:30px
font-family：设置字体，如：“宋体”，“楷体"等(中文加”")
连写 --> font：进行连写，如设置字体为宋体，大小为20px，为斜体，字体加粗–>font:italic bold 20px “宋体”;
text-decoration：文本装饰属性，常用取值为，underline下划线，overline上划线，line-through删除线，none没有线
text-align：水平方向的对齐方式，取值：left right center
text-indent：缩进方式 em作为缩进单位，2em相对于往里面缩进文字的宽度
color：设置文字的颜色，用英语单词，#十六进制数，rgb(值1,值2,值3)

背景系列样式

用来设置标签的背景相关样式

background-color：设置标签背景颜色
background-image：设置背景图像它的属性值语法格式url("相对路径") ，会自动平铺
background-repeat：设置平铺的方式，有四个值，repeat默认，no-repeat不平铺，repeat-x水平平铺，repeat-y不平铺
background-position：设置背景定位方式，格式为：水平方向数值垂直方向数值，水平方向有：left center right 。垂直方向有：top center bottom 。也可以是具体的像素值
background-size：设置背景图像的尺寸大小，尺寸大小可以使用百分比，也可以使用具体的像素值，
background-attachment：设置背景的关联方式，常用的有两个:scroll(会随着滚动条的滚动而滚动)，fixed(不会随着滚动条的滚动而滚动)
连写 --> background：颜色图片平铺的方式定位的方式 … 中间可以任意写。

边框系列样式

border属性：宽度样式颜色；
border-radius：倒角，设置边框四角的弧度。

盒子模型

内容到边框的距离叫做内边距，内边距属性按照上右下左顺序进行设置，也可以分开设置，改变内边距的宽高会影响元素的大小，

margin：元素边框与元素边框之间的间距就是外边距，设置的顺序也是上右下左，如果我们设置margin的值为0 auto就代表距离上方为0px距离，距离左右两边为水平居中。

盒子模型的构成：(边框盒子：box-sizing:border-box)

元素的宽度：左边边框+左边内边距+内容宽度+右边的内边距+右边边框 -->width=padding+border+content
元素的高度：上边边框+上边内边距+内容的高度+下边内边距+下边边框 --> height=padding+border+content
元素空间的宽度：左边的外边距+元素的宽度+右边的外边距
元素空间的高度：上边的外边距+元素的高度+下边的外边距

如果我们采用的是内容盒子模型，context-box，那么设置内边距后，元素自身的宽高也会发生改变。

但是如果设置盒子模型为边框盒子，border-box，那么设置内边距后自身的宽高不会发生改变，但内容的宽高会发生改变

如果两个相邻元素，对同一区域设置外边距，浏览器取大值

练习：定义两个div，一个宽高500px，一个宽高200px，让小的在大的正中央

JavaScript概念介绍
JavaScript的引入
ECMAScript
BOM
DOM

标准流

HTML标签被分为两种类型，一种是块级标签(独占一行，能够设置宽高)，另外一种是行级标签(不独占一行，不能设置宽高)

这两种类型的标签，都是按照标准流的方式进行渲染加载(排列)，行级标签从左到右加载，块级元素从上到下进行加载

display

display属性：常用取值：inline(行级元素)，block(块级元素)，inline-block(行内块元素)，none(隐藏，不占空间)

浮动流

设置标签的属性float，它能够让元素向左(left)或者向右(right)进行浮动，浮动流只能是左右浮动，没有上下浮动，如果元素按照浮动流渲染那么该元素会脱离标准流，在浮动流中没有行级元素和块级元素之说。但是都可以设置宽高
在标准流的加载方式下，如果更改标准流那么该元素后面的元素会相应的顶上来。
如果按照浮动流进行加载，在浮动流加载的情况下，元素之间排列是紧邻排列，之间没有空隙。
浮动流一般加载在标准流的上面

clear属性

设置clear属性，能够使其他元素在浮动的过程中不去紧贴其他的标签，只会i影响自己，不会影响其他的元素

定位流

相对定位(relative)

相对定位不会脱离标准流，相对于在标准流的位置进行位置移动的。所以相面的元素不会顶上来。

属性position设置为relative，进行位置移动结合属性top，left，right，bottom进行空间位置移动，

绝对定位(absolute)

会脱离标准流，所以下面的元素会顶上来，相对于标准流的位置上进行空间移动，

设置属性position为absolute，需要结合top，left，right，bottom四个属性搭配使用。

如果它的父元素或者祖先元素都没有设置定位流(不管是相对定位、绝对定位、固定定位)，相对于body进行定位，如果父元素或祖先元素有定位流，绝对定位就相对于父元素或祖先元素(就近原则)。

在绝对定位中也是不区分块级元素和行级元素，但是可以设置宽高

定位流中一般我们采用子绝父相

固定定位

固定定位也会脱离标准流，设置position为fixed，依然需要借助于四个方向属性：top，left，right，bottom进行空间移动。(是相对于浏览器窗口的定位)

不区分行级元素和块级元素，和绝对定位一样，唯一不同的是，不会随着滚动条的滚动而发生移动，

z-index

z-index可以改变定位流中的前后加载顺序。

定位流中有以下规律

默认情况下定位流会覆盖标准流
默认情况下后面的会覆盖前面的
定位流中设置z-index，是一个整数数值，谁的大，谁就在上面。
如果父元素设置z-index，子元素的z-index就会失效，谁的父元素大，谁就显示在上方(从父原则)