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;
}

4.2子选择器

p>span{
    color:red;
}

4.3相邻兄弟选择器

/*向下，一个*/
p+pan{
    color:red;
}

4.4通用兄弟选择器

/*向下，所有*/
p~pan{
    color:red;
}

5.结构伪类选择器

/*ul的第一个子元素*/
ul li:first-child{}
/*ul的最后一个子元素*/
ul li:last-child{}
/*选择当前p元素的父级元素，选中父级元素的第一个元素，并且是p元素才生效*/
p:nth-child(1){}
/*选择当前p元素的父级元素，选中父级元素的第二个p元素*/
p:nth-of-type(2){}

6.属性选择器

/*标签[属性：值]{}   属性可以使用正则表达式
=  绝对等于
*=  含等于
^=   以这个开头
$=   以这个结尾
*/
a[id]{}
a[id="a"]{}
a[class*="a"]{}

7.声明方式

/*集体声明*/
h1,p{text-align:center;}
/*全局声明*/
*{text-align:center;}

8.混合

//多个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
text-shadow	阴影	text-shadow:x偏移，y偏移，颜色

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	默认值

父级元素边框塌陷问题

增加父级元素的高度
增加一个空的div标签，清除浮动
overflow，在父级元素中增加overflow：hidden

在父类中添加一个伪类：after（推荐）

#father:after{
    content:'';
    display:block;
    clear:both;
}

2.3层定位layer

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

z-index属性：大的在上层

opacity属性：透明度

六、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属性
- 像素值（越小，离舞台越近）

posted @ 2022-06-26 20:41 深巷の猫阅读(21) 评论(0) 收藏举报

刷新页面返回顶部

cherish-0

CSS

一、语法

二、样式添加方法

1.行内样式

2.内嵌样式

3.链接样式

4.优先级

三、选择器

1.标签选择器

2.类选择器

3.ID选择器

4.层次选择器

4.1后代选择器

4.2子选择器

4.3相邻兄弟选择器

4.4通用兄弟选择器

5.结构伪类选择器

6.属性选择器

7.声明方式

8.混合

四、样式

1.文字

1.1单位与颜色

1.2文本属性

1.3字体属性

2.背景

3.超链接

4.列表

5.表格

奇偶选择器

五、布局与定位

1.盒子模型

水平分割线

2.定位机制

2.1文档流flow（默认）

2.2浮动定位float

2.3层定位layer

六、CSS3

1.圆角边框

2.阴影

3.文字与文本

3.1文本阴影

3.2长文本

3.3@font-face规则

4.2D变换

5.过渡与动画

5.1过渡

5.2动画

6.3D变换

公告