CSS

2022/6/26 23:27:28

编程Tag： 属性 css 样式 Font px color border

本文主要是介绍CSS，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、语法

p{//选择器（设置样式的范围）
    //属性：值;
    font-size:12px;//字号
    color:blue;//字体颜色
    font-weight:bold;//加粗
}
/*注释*/

二、样式添加方法

1.行内样式

<p style="color:red">//设置style属性
    
</p>

2.内嵌样式

head标签内设置style标签

只对当前页面有效

<head>
    <style type="text/css">
        p{
            color:red;
        }
    </style>
</head>

3.链接样式

链接css文件

<head>
    <link rel="stylesheet" href="路径" />
</head>

4.优先级

多重样式可以层叠，可以覆盖
样式的优先级按照“就近原则”
行内样式>内嵌样式>链接样式>浏览器默认样式

三、选择器

1.标签选择器

选择器的名字为标签的名字

h1{
    font:"黑体";
    font-size:12px;
}

2.类别选择器

p{font-size:12px;}
.one{font-size:18px;}
.two{font-size:24px;}

样式的引用：设置class属性

<p class="one">
    类别1
</p>
<p class="two">
    类别2
</p>
<p>
    普通段落
</p>

3.ID选择器

#one{font-size:12px;}
#two{font-size:24px;}

样式的引用：设置id属性

<p id="one">
    文字1
</p>
<p id="two">
    文字2
</p>

4.声明

4.1嵌套声明

p span{
    color:red;
}

<p><span>文字1</span>文字2</p>

4.2.集体声明

h1,p{text-align:center;}

4.3.全局声明

*{text-align:center;}

5.混合

//多个class选择器混用，用空格分开
<div class="one two"></div>

//id和class混用
<div id="my" class="one"></div>

id选择器不可以多个同时使用

四、样式

1.文字

1.1单位与颜色

单位	颜色
px：像素	red，blue，green：颜色名
em：字符（自动适应用户字体）	rgb(x,x,x)：RGB值
%：百分比	rgb(x%,x%,x%)：RGB百分比值
	rgba(x,x,x,x)：RGB值，透明值
	#rrggbb：十六进制数

1.2文本属性

属性	描述	取值
color	文本颜色	red，rgb(x,x,x)···
letter-spacing	字符间距	px,em
line-height	行高	px,em,%
text-align	对齐	center,left,right,justify
text-decoration	装饰线	none,overline,underline,line-through
text-indent	首行缩进	em

1.3字体属性

属性	描述	取值
font	设置所有字体属性	font:斜体粗体字号/行高字体
font-family	字体系列	font-family:"Microsoft YaHei",sans-serif;（依照顺序找到字体，有空格时需要加双引号）
font-size	字号	px,pt,%
font-style	斜体	italic
font-weight	粗体	bold

2.背景

背景图片会覆盖背景颜色

属性	描述	取值
background	设置所有字体属性	background:颜色图片 repeat
background-color	背景颜色	reg,rgb(x,x,x)···
background-image	背景图片	url("路径")
background-repeat	背景图片的填充方式	repeat,repeat-x,repeat-y,no-repeat

3.超链接

超链接的状态，:伪类选择器

状态	描述
a:link	普通的、未被访问的链接
a:visited	用户已访问的链接
a:hover	鼠标指针位于链接的上方悬停
a:active	链接被点击的时刻

设置的顺序：a:link,a:visted>a:hover>a:active

a:link{
    text-decoration:none;
    color:#09f;
}
a:visited{
    text-decoration:none;
    color:#930;
}
a:hover{
    text-decoration:underline;
    color:#03c;
}
a:active{
    text-decoration:none;
    color:#03c;
}

4.列表

属性	描述	取值
list-style	设置所有列表属性
list-style-image	为列表项标志设置图像	url("路径")
list-style-position	标志的位置	inside,outside
list-style-type	标志的类型

list-style-type属性值	描述
none	无标记
disc	实心圆（默认）
circle	空心圆
square	实心方块
decimal	数字
lower-roman	小写罗马数字
upper-roman	大写罗马数字
lower-alpha	小写英文字母
upper-alpha	大写英文字母
lower-Greek	小写希腊字母
lower-latin	小写拉丁字母
upper-latin	大写拉丁字母

5.表格

属性	描述	取值
width	宽	px
height	高	px
border	边框	border:1px solid #eee（宽度实线/虚线颜色）
border-collapse	表格重叠	collapse

奇偶选择器

隔行显示不同的颜色

标签:nth-child(数字/odd/even){//数字：第几行、odd：奇数、even：偶数
    
}

五、布局与定位

1.盒子模型

属性	描述	取值
content	内容
height	高度	px
width	宽度	px
padding	内边距（-top、-bottom、-left、-right）	px,%（外层盒子的值）
border	边框（-top、-bottom、-left、-right）	px,%
margin	外边距（-top、-bottom、-left、-right）	px,%（外层盒子的值）、

overflow属性（内容溢出的处理）值	描述
hidden	超出部分不可见
scroll	显示滚动条
auto	如果有超出部分，显示滚动条

border属性	描述	取值
border	设置所有边框属性	宽度样式颜色
border-width	边框宽度	px,thin,medium,thick
border-style	边框样式	dashed（虚线）、dotted（点）、solid（实线）、double（双实线）
border-color	边框颜色	red，rgb(x,x,x)···

水平分割线

.line{
    height:1px;
    width:500px;
    border-top:1px solid #e5e5e5;
}

padding、margin属性：px,%（外层盒子的值）

margin属性：margin:px,px,px,px（上、右、下、左；省略时：上=下，右=左）

margin属性的合并：外边距合并成一个（取较大者）、垂直方向合并，水平方向不合并

水平居中：margin:任意值 auto；

2.定位机制

2.1文档流flow（默认）

从左到右，从上到下

元素分类	特点	常见元素
block	独占一行、元素的height、width、margin、padding都可设置	div、p、h1...h6、ol、ul、table、form
inline	不单独占用一行、width、height不可设置、有间隙问题	span、a
inline-block	不单独占一行、height、width、margin、padding都可设置	img

属性display：设置显示的属性

a{
    display:block;
}

2.2浮动定位float

float属性（设置浮动）	描述
left	左浮动
right	右浮动
none	不浮动

clear属性（清除浮动）	描述
both	清除左右两边的浮动
left/right	只能清除一个方向的浮动
none	默认值

2.3层定位layer

position属性	描述
static	没有定位（默认值）
fixed	固定定位（相对于浏览器窗口）
relative	相对定位（相对于直接父元素）、其在文档流中的原位置依然存在
absolute	绝对定位（相对于static以外的第一个父元素（最近定义的relative或者absolute），找不到则相对于body）、其在文档流中的原位置不再存在

z-index属性：大的在上层

六、CSS3

w3c制定标准慢，浏览器厂商快速加入新属性的支持，加前缀

w3c确定标准后，全面支持，去掉前缀

浏览器内核	浏览器	CSS3前缀
Webkit	Safari、Chrome	-webkit-
Gecko	Firefox	-moz-
Presto	Opera	-o-
Trident	IE	-ms-

1.圆角边框

border-radius属性	描述
border-top-left-radius：水平值垂直值	左上角形状
border-top-right-radius：水平值垂直值	右上角形状
border-bottom-left-radius：水平值垂直值	左下角形状
border-bottom-right-radius：水平值垂直值	右下角形状

2.阴影

box-shadow属性	描述
inset	内部阴影
outset	外部阴影（默认）

box-shadow:inset /outset（默认）水平偏移垂直偏移模糊距离颜色

3.文字与文本

3.1文本阴影

text-shadow:水平偏移垂直偏移阴影大小颜色

3.2长文本

允许长单词、URL强制进行换行

word-wrap：normal/break-word

3.3@font-face规则

利用@font-face规则，定义web字体，并引用

需要字体的四种文件格式，确保能在主流浏览器中都能正常显示改字体

字体文字后缀	适用于浏览器
.TTF或.OTF	Firefox、Safari、Opera
.EOT	Internet Explorer 4.0+
.SVG	Chrome、IPhone
.WOFF	Chrome、Firefox

<style>
    @font-face{
        font-family:字体名字;
        src:url("路径1"),
            url("路径2"),
            url("路径3"),
            url("路径4");
    }
    P{
        font-family:字体名字;
    }
</style>

4.2D变换

transform属性

旋转：transform:rotate(度数deg);（顺时针）
缩放：transform:scale(x,y);（x,y：水平，垂直方向的缩放倍数）

5.过渡与动画

5.1过渡

transition属性：将元素的某个属性从“一个值”，在指定的时间内过渡到“另一个值”

transition属性	描述
transition	属性名持续时间过渡方法
transition-property	属性名/all（对哪个元素进行变换）
transition-duration	持续时间
transition-timing-function	过渡使用的方法
transition-delay	过渡效果何时开始

transition-timing-function值	描述
linear	匀速
ease	慢快慢
ease-in	慢快
ease-out	快慢
ease-in-out	慢快慢

5.2动画

定义动画：@keyframes规则

@keyframes mycolor(动画名字)
{
    0%(关键帧的名字) {background-color：red;}
    30% {background-color：blue;}
    60% {background-color：yellow;}
    100% {background-color：green;}
}

调用动画：animation属性

div:hover{
	animation:mycolor(动画名字) 持续时间 过渡方法
}

animation属性值	描述
animation	动画名持续时间过渡方法
animation-name	引用@keyframes动画的名称
animation-duration	动画完成的时间
animation-timing-function	规定动画的速度曲线（默认“ease”）
animation-play-state	running/paused（动画的播放状态）

6.3D变换

设置transform-style：preserve-3d；

旋转：transform属性
- rotateX(度数deg)
- rotateY(度数deg)
- rotateZ(度数deg)
透视：perspective属性
- 像素值（越小，离舞台越近）

这篇关于CSS的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS