css的侧重点（2021.7.11）

最新推荐文章于 2022-02-27 15:32:28 发布

鸭蛋炒西红柿

最新推荐文章于 2022-02-27 15:32:28 发布

阅读量403

点赞数

文章标签： css

本文链接：https://blog.csdn.net/lsh235/article/details/118660973

版权

1. 字体相关样式属性

第一章：字体与文本相关样式

font:这是一个复合属性，其属性值是形如 font-style font-variant font-weight font-sizeline-height font-family 的复合属性值。

font-size在font复合属性中使用的比较多，该属性用于设置文字的字体大小

没用font-size之前

用了font-size：50px之后

font-style:该属性用于设置文字风格,是否采用斜体等。该属性的常用属性值有normal、italic、oblique，这些属性值依次表示设置文字正常、斜体、倾斜字体。

font-style:normal:

font-style: italic;

font-style: oblique;

用的最多的还有

text-decoration

下划线text-decoration: underline

中划线 text-decoration: line-through

上划线text-decoration: overline

font-variant:该属性用于设置文字的大写字母的格式。该属性支持normal、small-caps两个属性值，分别对应于正常的字体、小型的大写字母字体。

当你输入的是小写字母时，加入font-variant：small-caps系统会将小写字母设置为大写的字母

上面讲了font-variant，下面讲一个跟它很像的

text-transform:该属性用于设置文字的大小写。

text-transform: capitalize;(代表首字母大写)

text-transform: uppercase;（代表字母全部大写）

text-transform:lowercase（代表字母全部小写）

2. 颜色表示方式

1.最简单的就是直接使用red（红色），blue（蓝色），green（绿色）等等，这些颜色比较单一

2.就是rgb（r,g,b）就是使用三色混合来形成其他的颜色，例如红色=255，蓝色=0，绿色=255这三种颜色就会混成黄色。

3.rgba与rgb（r,g,b）三色混合的原理相同，就是多了一个a，a就是透明度，a可以取0-1的值，0就是透明的。

3. 文本相关样式属性

text-indent:用于设置段落文本的缩进，默认值为0。当设置为其他值为就会缩进

text-align:用于设置目标元素中文本的水平对齐方式。

其作用为让块级元素里面的文本或行内元素对齐。

如果此块级元素里面含有块级元素，那么这个被含有的块级元素不会被控制居中

left(左对齐)

right(右对齐)

center（居中对齐）

justify（两端对齐)

white-space:用于设置目标元素对文本内容中空白的处理方式。

normal:默认属性值。浏览器忽略文本中的空白。

pre:浏览器保留文本中的所有空白

nowrap:文本不会换行，文本会在同一行上继续，直到遇到换行<br>标签为止

pre-wrap:保留空白符序列，但可以正常地进行换行。文本不会换行，文本会在同一行上继续，直到遇到<br.>标签为止。包装前：保留空白符序列，但可以正常地进行换行.

pre-line:合并空白符序列，但保留换行符。

word-break:用于设置目标元素中文本内容的换行方式。

word-wrap:用于设置目标元素中文本内容的换行方式。

4. 服务器字体（重点）

1、服务器字体定义方式:

一般使用的@font-face，记住要使用相对的路径，url（"把你想要的字体放在这里面然后引用"），

2、服务器字体使用方式:

我这里用的是Blazed字体，在官网上就能直接下载

第二章：背景、边框、边距相关样式属性

1、background复合属性定义

background-color:用于设置背景色。background-color:+颜色。
background-image:用于设置背景图片。
background-repeat:该属性有repeat，no-repeat、 repeat-x. repeat-y这4个值，分别代表平铺、不平铺、仅在横向平铺、仅在纵向平铺。我们使用比较多的是repeat和no-repeat。background-repeat还有两个新增的值，round和space，round会自动调整图片的的大小，而space不会调整.

background-size的两个常用值：cover和contain

cover不顾图片是否完整，把容器铺满为止；

contain在保证图片完整的前提下，尽量把容器给铺满

2.渐变背景颜色

linear-gradient(方向，颜色)

to top：代表从下到上

to bottom：代表从上到下

to left：从右到左

to right：从左到右

to left top ：从右下到左上（一样的）

Deg：代表着角度值。

2. 边框样式

border：这个是一个复合属性，用于设置目标元素的边框元素，可设置粗细，颜色，大小。

1、边框样式

none：无边框

hidden：隐藏边框

dotted：点线边框

dashed：虚线边框

soild：实现边框

2、圆角边框

border-radius:该属性用于指定圆角边框的圆角半径(半径越大，圆角的程度越大)。

border-left-top-radius:该属性指定左上角的圆角属性。

border-right-top-radius:该属性指定右上角的圆角属性。

border-left-botton-radius:该属性指定左下角的圆角属性。

border-right-bottom-radius:该属性指定右下角的圆角属性。

3. 透明度

opacity：该属性代表着透明度，值由0-1,0代表值透明，而1代表着不透明。

4. 内边距

padding代表着内边距，代表着上，下，左，右4个边的内填充距离。该属性可以设置4个值，3个值，2个值以及一个值，4个值就上，下，左，右的值。3个值就是，第一个值和第3个值代表着上下的距离，而第二个值代表着左右的内填充的距离，若是2个值，则第一个值代表着上下，第二个值代表着左右的内填充距离。

padding-top；设置上填充的距离

padding-bottom；设置下填充的距离

padding-left；设置左填充的距离

padding-right；设置右填充的距离

5. 外边距

margin该属性跟padding属性差不多，不过代表的是外边距，代表着跟外边4条边的外边距距离。也可以设置4,3,2,1个值，跟padding差不多，可以参考padding

margin-top：上边距

margin-left：左边距

margin-right：右边距

margin-bottom：下边距

第三章：表格、列表、鼠标、响应式布局相关属性

1. 表格相关属性

border-collapse:该属性控制两个单元格的边框是合并在一起,还是按照标准的HTML样式分开。该属性有两个值，即 seperate(边框分开，使得单元格的分隔线为双线)和collapse（边框合并，使得单元格的分隔线为单线）。

border-spacing:当设置 border-collapse为 seperate时，该属性用于设置两个单元格边框之间的间距。
caption-side:用于设置表格标题位于表格哪边。该属性必须和<caption...l>元素一起使
用。该属性有4个值，即 top、bottom、left、right，分别对应于将表格标题放在表格的上、下、左、右4处。一般使用top和bottom比较多
empty-cells:该属性控制单元格内没有内容时，是否显示单元格边框。只有当border-collapse属性设置成 seperate时，该属性才有效。该属性支持 show(显示）和hide(隐藏）两个属性值。
table-layout:用于设置表格宽度布局的方法。该属性支持auto和 fixed两个属性值，其中 auto是默认值,也就是平时常见的表格布局方式: fixed则指定使用固定布局方式。

代码示例：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

table {

border-collapse: separate;/*使边框分开*/

border-spacing: 20px;/*两个单元格之间的间隔*/

caption-side: bottom;/*把标题设置在表格的下面*/

empty-cells: hide;/*将单元格没有的给他隐藏起来，这样页面也不会很难看*/

}

</style>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

2. 列表相关属性

list-style代表着我们写在前面的点

使用较多的是list-style：none 代表把前面的点去掉

3. 鼠标相关样式

all-scroll:代表十字箭头光标。

col-resize:代表水平拖动线光标。

crosshair:代表十字线光标。

move:代表移动十字箭头光标。

help:代表带问号的箭头光标

no-drop:代表禁止光标。

not-allowed:代表禁止光标。

pointer:代表手形光标。

progress:代表带进度环的箭头光标。

row-resize:代表垂直拖动线光标。

这个看你个人喜欢，决定使用哪个光标，然后设置光标。

4. 响应式布局media query（重点）

1、media query语法

@media not|only 设备类型{ and 设备特征}*

2、media query使用

代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

#container {

text-align: center;

margin: auto;

width: 750px;

}

#container>div {

border: 1px solid #aaf;

text-align: left;

box-sizing: border-box;

border-radius: 12px 12px 0px 0px;

padding: 5px;

}

div#left {

width: 300px;

height: 260px;

float: left;

}

div#main {

width: 450px;

height: 260px;

float: left;

clear: right;

}

div#right {

width: 750px;

float: left;

}

@media screen and (min-width:1000px) {

#container {

text-align: center;

margin: auto;

width: 960px;

}

#container>div {

border: 1px solid #aaf;

box-sizing: border-box;

border-radius: 12px 12px 0px 0px;

padding: 5px;

}

div#left {

width: 240px;

height: 260px;

float: left;

}

div#main {

width: 460px;

height: 260px;

float: left;

clear: none;

}

div#right {

width: 260px;

float: left;

height: 260px;

}

@media screen and (max-width:480px) {

#container {

text-align: center;

margin: auto;

width: 450px;

}

#container>div {

border: 1px solid #aaf;

box-sizing: border-box;

border-radius: 12px 12px 0px 0px;

padding: 5px;

}

div#left {

width: 450px;

height: 150px;

float: left;

}

div#main {

width: 460px;

height: 260px;

float: left;

clear: both;

}

div#right {

width: 450px;

float: left;

height: 170px;

}

</style>

</head>

<body>

asdfghjkl

</div>

qwertyuiop

</div>

zxcvbnm

</div>

</body>

</html>

3、media query使用时需要设置viewport

因为手机屏幕跟浏览器的屏幕是不一样的，在使用时会产生差别，所以我们设置viewport来让他们的屏幕是一样的

第四章：变形与动画相关属性

1. 变形相关属性

1、基本属性

translate(tx [,ty]):该函数设置元素html元素沿x轴移动tx距离,沿y轴移动ty距离。

translate3d(tx, ty,tz):该函数设置html元素沿x轴移动tx距离，沿y轴移动ty距离，沿z轴移动z距离。

translate X(tx):表示该元素沿x轴移动tx的距离。

translate Y(ty):表示该元素沿y轴移动ty的距离。

translate Z(tz):表示该元素沿z轴移动tz的距离。

scale(sx, sy，sz):该函数设置HTML元素沿X轴方向缩放比为sx，沿Y轴方向缩放比为sy，沿z轴方向缩放sz。

scale(sx, sy):该函数设置HTML元素沿X轴方向缩放比为sx，沿Y轴方向缩放比为sy。

scale(sx):相当于沿y轴缩放sx的比例即等于scale(sx,1)。

scale(sy):相当于沿x轴缩放sy的比例即等于scale(1,sy)。

scale(sz)：相当于scale(1,1,sz);

rotate3d(x,y,z,angle):该函数设置HTML元素绕指定轴(x、y、z参数代表旋转轴的方向）顺时针转过angle角度。即

rotateZ(angle):该函数设置HTML元素绕z轴顺时针转过angle角度

rotateX(angle):该函数设置HTML元素绕x轴顺时针转过angle角度。

rotateY(angle):该函数设置HTML元素绕y轴顺时针转过angle角度。

skew(sx，[sy]):该函数设置HTML元素沿着X轴倾斜sx 角度，沿着Y轴倾斜sy角度。

skewX(angle):该函数设置HTML元素沿着X轴倾斜angle角度。

2、设置变形中心点

transform-origin: left top;

中心点为左上，围绕着左上来旋转。

3、3D效果相关属性

如果要设置3D的效果，就必须要要设置perspective

注意：perspective值越小，3D效果越明显

4、3D嵌套效果

transform-style 属性指定是否在3D空间正确呈现元素的“遮挡”等嵌套关系。如果希望正常看到HTML元素之间的嵌套关系，就需要设置transform-style属性。该属性支持如下两个属性值。

flat:不保留子元素的3D位置。

preserve-3d:子元素将保留3D位置。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

position: absolute;

border: 1px solid #000;

}

div#a {

padding: 60px;

background: #eee;

transform: rotateY(30deg);

transform-style: preserve-3d;

}

div#b {

padding: 40px;

background: #aaa;

transform: rotateY(20deg);

}

</style>

</head>

<body>

</div>

</body>

</html>

2. 动画相关

1、transtion（过渡）动画相关属性

Transition动画通过transition属性来指定。transition属性的值包括如下4个部分。

transition-property:指定对html元素的哪个css属性进行平滑渐变处理。该属性可以指定background-color、width、height等各种标准的css属性。

transition-duration:指定属性平滑渐变的持续时间。

transition-timing-function:指定渐变的速度。该部分支持如下几个值。

ease:动画开始时较慢，然后速度加快，到达最大速度后再减慢速度。linear:线性速度。动画开始时的速度到结束时的速度保持不变。

ease-in:动画开始时速度较慢，然后速度加快。

ease-out:动画开始时速度很快，然后速度减慢。

2、transtion动画同时变化多个属性

transition: transform 3.5s ease, background 3.5s ease, width 3.5s ease;

transtion:all 3.5 ease

margin:0;

padding:0

transtion:all .5s ease

}

13、animation动画相关属性

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

@keyframes javags {

0% {

left: 100px;

background-color: red;

}

50% {

left: 200px;

background-color: yellow;

}

70% {

left: 150px;

background-color: green;

}

100% {

left: 75px;

background-color: blue;

}

div {

background: red;

width: 200px;

height: 200px;

margin: 200px;

position: relative;

}

div:hover {

animation-name: javags;

animation-duration: 2s;

animation-timing-function: ease;

animation-iteration-count: 4;

}

</style>

</head>

<body>

</body>

</html>

鸭蛋炒西红柿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的侧重点（2021.7.11）

1. 字体相关样式属性第一章：字体与文本相关样式font:这是一个复合属性，其属性值是形如 font-style font-variant font-weight font-sizeline-height font-family 的复合属性值。font-size在font复合属性中使用的比较多，该属性用于设置文字的字体大小没用font-size之前用了font-size：50px之后font-style:该属性用于设置文字风格,是否采用斜体等。该属性的常用属性值有norma.
复制链接

扫一扫