初识css

菜鸟码农12

已于 2023-02-15 12:24:55 修改

阅读量43

点赞数

文章标签： css Powered by 金山文档

于 2023-02-12 21:20:35 首次发布

本文链接：https://blog.csdn.net/m0_66150966/article/details/129000028

版权

HTML中引入CSS的三种方式

行内样式：

<h1 style="color:red;">style属性的应用</h1>

<p style="font-size:14px; color:green;">直接在标签中设置的样式</p>

内部样式：

<style>

h1{color: green; }

</style>

外部样式：

<head>

</head>

CSS的选择器

CSS的基本选择器

标签选择器

类选择器

ID选择器

CSS的高级选择器

层次选择器

结构伪类选择器

属性选择器

CSS的基本选择器

1：标签选择器：HTML标签作为标签选择器的名称

语法：

2：类选择器

3：ID选择器

层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

后代选择器

语法：

body p{ background: red; }

注意：后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入；

子选择器

body>p{ background: pink; }

相邻兄弟选择器

.active+p { background: green; }

通用兄弟选择器

.active~p{ background: yellow; }

结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

E[attr]属性选择器

a[id] { background: yellow; }

E[attr=val]属性选择器

a[id=first] { background: red; }

注意：

E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中

E[attr^=val]属性选择器

a[href^=http] { background: red; }

E[attr$=val]属性选择器

a[href$=png] { background: red; }

E[attr*=val]属性选择器

a[class*=links] { background: red; }

<span>标签

作用：

能让某几个文字或者某个词语凸显出来

字体样式

属性	含义	示例
font-family	设置字体类型	font-family:"隶书";
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体属性字体属性的顺序：字体风格→字体粗细→字体大小→字体类型	font:italic bold 36px "宋体";

font-weight属性

值	说明
normal	默认值，定义标准的字体
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体
100、200、300、400、500、600、700、800、900	定义由细到粗的字体 400等同于normal，700等同于bold

文本样式

文本属性

属性	含义	示例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;

排版文本段落

水平对齐方式

text-align属性

值	说明
left	把文本排列到左边。默认值：由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

文本修饰和垂直对齐

文本修饰

text-decoration属性

值	说明
none	默认值，定义的标准文本
underline	设置文本的下划线
overline	设置文本的上划线
line-through	设置文本的删除线

文本阴影

语法：

text-shadow : color x-offset y-offset blur-radius;

color：阴影颜色

x-offset：X轴位移，用来指定阴影水平位移量

y-offset ：Y轴位移，用来指定阴影垂直位移量

blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围

超链接伪类

伪类样式

语法：

标签名:伪类名{声明;}

示例：

a:hover {

color:#B46210;

text-decoration:underline;

}

使用CSS设置超链接

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

设置伪类的顺序：a:link->a:visited->a:hover->a:active

列表样式

list-style-type

list-style-image

list-style-position

list-style

背景样式

背景颜色：background-color属性

背景图像：background-image属性

背景重复方式：background-repeat属性

背景定位：background-position属性

背景样式简写：background属性

设置背景图像

背景图像：background-image属性

语法：

background-image:url(图片路径);

背景重复方式：background-repeat属性

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

设置背景图像

背景定位：background-position属性

值	含义
Xpos Ypos	单位：px， Xpos表示水平位置，Ypos表示垂直位置
X% Y%	使用百分比表示背景的位置
X、Y方向关键词	水平方向的关键词： left、center、right 垂直方向的关键词： top、center、bottom

背景属性

背景属性：background属性

CSS3渐变

线性渐变

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

径向渐变

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

线性渐变

linear-gradient ( position, color1, color2,…)

position：渐变方向

color1：第一种颜色值

color2：第二种颜色

盒子模型—边框

边框的常用属性

border-color（边框颜色）

border-width（边框粗细）

border-style（边框样式）

border

border-color

属性	说明	示例
border-top-color	上边框颜色	border-top-color:#369;
border-right-color	右边框颜色	border-right-color:#369;
border-bottom-color	下边框颜色	border-bottom-color:#fae45b;
border-left-color	左边框颜色	border-left-color:#efcd56;
border-color	四个边框为同一颜色	border-color:#eeff34;
	上、下边框颜色：#369 左、右边框颜色：#000	border-color:#369 #000;
	上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00	border-color:#369 #000 #f00;
	上、右、下、左边框颜色： #369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f;

border-width

属性	说明	示例
border-top-width	上边框粗细	border-top-width:5px;
border-right-width	右边框粗细	border-right-width:10px;
border-bottom-width	下边框粗细	border-bottom-width:8px;
border-left-width	左边框粗细	border-left-width:22px;
border-width	四个边框的粗细统一	border-width:5px;
	上、下边框粗细：10px 左、右边框粗细：5px	border-width:10px 2px;
	上边框粗细：5px 左、右边框粗细：1px 下边框粗细：6px	border-width:5px 1px 6px;
	上、右、下、左边框粗细： 1px 2px 5px 2px	border-width:1px 2px 5px 2px;

border-style

none

hidden

dotted

dashed：虚线边框

solid：实线边框

double

border

同时设置边框的颜色、粗细和样式

示例：

border:1px solid #3a6587;

border:1px dashed red;

外边距

margin

margin-top

margin-right

margin-bottom

margin-left

margin

外边距

外边距的妙用：网页居中对齐

margin:0px auto;

经验：

网页居中对齐的必要条件：块元素和固定宽度

内边距

padding

padding-left

padding-right

padding-top

padding-bottom

padding

盒子模型的尺寸

高度=上下外边距+上下边框+上下内边距+内容宽度

宽度=左右外边距+左右边框+左右内边距+内容宽度

box-sizing属性

语法：

box-sizing：content-box | border-box | inherit;

content-box：盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框

border-box：盒子的实际高度和宽度包括元素内容、边框和内边距

圆角边框

语法：

border-radius: 20px 10px 50px 30px;

使用border-radius制作特殊图形

圆形

利用border-radius属性制作圆形的两个要点

元素的宽度和高度必须相同

圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

示例：

div{

width: 100px;

height: 100px;

border: 4px solid red;

border-radius: 50%;

}

半圆形

利用border-radius属性制作半圆形的两个要点

制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值。

制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

扇形

利用border-radius属性制作扇形遵循“三同，一不同”原则

“三同”是元素宽度、高度、圆角半径相同

“一不同”是圆角取值位置不同

盒子阴影

语法：

box-shadow:inset x-offset y-offset blur-radius color;

inset：阴影类型内阴影

x-offset：X轴位移，指定阴影水平位移量

y-offset：Y轴位移，指定阴影水平位移量

blur-radius：阴影模糊半径阴影向外模糊的模糊范围

color：阴影颜色，定义绘制阴影时所使用的颜色

浮动

经验：

内联标签可以包含于块级标签中，

成为它的子元素，而反过来则不成立

display属性

display属性作用：用于指定HTML标签的显示方式

常用属性值如下表所示：

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

浮动属性：float

float属性

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其文本中出现的位置

边框塌陷

清除浮动

clear属性

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

解决父级边框塌陷的方法

clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，怎么办？

浮动元素后面加空div

设置父元素的高度

父级添加overflow属性

父级添加伪类after

overflow属性

overflow属性：溢出处理

属性值	说明
visible	默认值。内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

小结

清除浮动，防止父级边框塌陷的四种方法

浮动元素后面加空div

简单，空div会造成HTML代码冗余

设置父元素的高度

简单，元素固定高会降低扩展性

父级添加overflow属性

简单，下拉列表框的场景不能用

父级添加伪类after

写法比上面稍微复杂一点，但是没有副作用，推荐使用

isplay:inline-block

可以让元素排在一行，并且支持宽度和高度，代码实现起来方便

位置方向不可控制，会解析空格

IE 6、IE 7上不支持

float

可以让元素排在一行并且支持宽度和高度，可以决定排列方向

float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

CSS中有三种定位机制

标准流

浮动

定位

定位属性：position

指定盒子的位置，指它对其父级的位置或相对它自身应该在的位置。

属性值	说明
static	默认值。没有定位，元素按照标准文档流进行布局。
relative	相对定位。不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
absolute	绝对定位。脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为body文档本身。
fixed	固定定位；相对于浏览器窗口进行定位，但不随着滚动条的移动而改变位置。

static属性值

默认值。没有定位，元素按照标准文档流进行布局。

relative属性值

相对自身原来位置进行偏移

偏移设置：top、left、right、bottom

left和top正、负取值的方向

相对定位元素的规律

相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置

设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响

设置相对定位的盒子原来的位置会被保留下来

浮动元素设置相对定位

设置第二个盒子右浮动，再设置第一、第二盒子相对定位

绝对定位

absolute属性值

偏移设置：left，right，top bottom

绝对定位小结

依次使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移

如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位

绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响

元素位置发生偏移后，它原来的位置不会被保留下来

绝对定位不设置偏移量

设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。

在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况

固定定位

fixed属性值

偏移设置： left、right、top、bottom

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口。

相对定位的特性

相对于自己的初始位置来定位

元素位置发生偏移后，它原来的位置会被保留下来

层级提高，可以把标准文档流中的元素及浮动元素盖在下边

相对定位的使用场景

相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

z-index属性

作用：调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方

网页元素透明度

属性	说明	举例
opacity:x	x值为0~1，值越小越透明	opacity:0.4;
filter:alpha(opacity=x)	x值为0~100，值越小越透明	filter:alpha(opacity=40);