css background 一半_学所前端初级教程 | 对CSS基础样式的了解和掌握

2020-08-04

CSS基础

●

●

●

#CSS-层叠样式表#

    层叠样式表-Cascading Style Sheets，是一种用来表现HTML或XML等文件样式的计算机语言。

    CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS的优势就是实现结构内容与样式属性的分离，即表现层与语义层的一个分离，这样做更易于修改，并且减少了html中的代码量，加快了网页的浏览速度，也节省了网络带宽。

    实训第二天温习的内容就是对CSS的基础知识，即选择器的使用、元素样式的书写以及伪类的使用等做了一遍温习，以下就是整理好的学习笔记内容。

#LOG#

CSS的写法

◆嵌入样式表

        选择器{ 

            属性：属性值 ; 

        }

这一段代码可以放在html代码中的任一位置，但通常放在头部-head中。

◆内联样式表

◆外部样式表 

rel-样式表文件。编写代码时，若将层叠式样式表文件与html代码分开编写，则需要通过link将css文件关联到html文档。

#LOG#

选择器

◆标签选择器：p{}

    通过标签名(p标签)查找元素，可同时找到一类标签元素。

◆类选择器：.text{}

    通过类名(class=“text”)查找元素，可同时找到多个相同类名的元素。

◆id选择器：#text{}

    通过id名(id="text")查找元素，一次查找得到一个该id名的元素，id值针对css不唯一，但是针对js脚本是唯一的，所以一般不设一样的id值。

◆选择器优先级：

    当在一个标签中同时设置了id名和类名时，并且在样式属性中分别使用了三种选择器对该标签的样式进行设置时，会产生了一个优先级关系，即：

id选择器 > 类选择器 > 标签选择器

#LOG#

#CSS样式属性#

01、字体-font

◆font-size-字体大小

单位:像素、em | 写法：font-size:18px;

    一个em单位为一个字体的高度，具有继承性，通常用在响应式网页和移动端。

◆color-字体颜色

写法：color：blue；

    CSS中色值的写法有五种，即颜色的英文单词、六位十六进制数、三位十六进制数、rgb()以及rgba()五种，另外，当色值设置为transparent时，元素就变成了固体透明的状态。

◆font-family-字体类型

写法：

中文字体：font-family：“华文行楷”；

英文字体：font-family：Arial Black；

    设置多种字体时，字体间用逗号隔开，作为备选字体，最多是五种，浏览器会按照书写的先后顺序选择一种字体显示，即当某个用户的本地机没有安装第一种字体时，打开的网页就会选择以第二种字体显示，以此类推，而在引入外部字体时，客户端不必安装此字体也可以显示。

◆font-style-字体风格

写法：font-style：normal；

font-style的属性值有：

normal-正常字体、italic-斜体、oblique-倾斜

◆font-weight-字体粗细

写法：font-weight:bold;

font-weight的属性值有：

bold-加粗、bolder-更粗(英文的比较级，比bold粗)，但有些浏览器会加载不出来。

lighter-更细、normal-正常粗细

字体样式演示，同时展示了三种选择器的写法

#LOG#

02、文本-text

◆color-文本颜色，用法与字体颜色的设置相同

◆text-align-文本的显示位置

写法：text-align：center;

text-align属性值有：

center-文本水平居中、right-文本右对齐(靠右显示)、left-文本左对齐(靠左显示)

◆text-indent-首行缩进

 写法：text-indent：2em；

◆line-height-设置单行文本垂直方向居中

当容器的高度为30px时

写法：line-height：30px；

◆text-decoration-设置文本装饰

写法：text-decoration：underline；

text-decoration的属性值有：

none-没有装饰、underline-下划线装饰

overline-上划线装饰、line-through-中线、

blink-定义闪烁的文本、inherit-规定应该从父元素继承 text-decoration 属性的值。    

◆letter-spacing-字符间距

写法：letter-spacing：3px；

属性值取负值时会使文字叠加

◆vertical-align-垂直对齐方式

写法：vertical-align：top；

vertical-align的属性值有

middle-居中、top-靠上、bottom-靠底端

    这个设置其实不起作用，要达到同样的效果，可以使用padding撑开，line-height设置为高度的一半。

文本样式演示

#LOG#

03、背景-background

  在设置块级元素背景时，要明确知道元素的宽高。

◆background-color-设置纯色背景

写法：background-color：#827390；

    其属性值为色值，色值的写法与字体色值的写法一致，五种写法都可。

◆background-设置纯色渐变背景

写法：background: linear-gradient

(45deg,#feac5e,#c779d0,#4bc0c8);

效果图

to left 设置渐变从右到左，相当于270deg。

to right设置渐变从左到右，相当于90deg

to top 设置渐变从下到上，相当于0deg

to bottom 设置渐变从上到下，相当于180deg

to right top= to top right，从左下角到右上角，对角线角度，正方形的情况下，这与45deg效果相同。

background:linear-gradient(45deg,#d3959b 20%,#bfe6ba);

用百分比指定起始颜色的位置，默认值为0%；

知识来源：https://www.cnblogs.com/liangdecha/p/9797124.html

◆background-image-设置背景图片；

写法：

background-image：url(’图片路径‘)；

◆background-repeat-设置图片是否平铺

写法：

background-repeat：no-repeat；

属性值：repeat(默认)、no-repeat-不平铺、repeat-x-水平方向平铺、repeat-y-垂直方向平铺

◆background-size-设置背景图片大小

属性值：

100% 100%-图片以百分百拉伸

按高度等比缩放-contain

按宽度等比缩放-cover

◆background-position-设置背景图片起始位置

属性值：

top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right、x% y%、xpos ypos。

    left/center/right-水平方向

    top/center/bottom-垂直方向

    在写样式的时候也可以灵活的不写方向，而是直接写具体像素值。

◆background-origin-设置背景图片定位区域

◆background-clip-设置背景的绘制区域

◆background-attachment-设置背景图像是否固定或者随着页面的其余部分滚动

属性值有：

scroll-滚动、fixed-固定(不滚动)

对背景样式的缩写：

background: color url() repeat attachment position;

背景样式演示

#LOG#

04、边框类-border

  在设置块级元素边框时，要明确知道元素的宽高。

◆border-style-线型

写法：border-style：solid；

属性值有：

solid-实线、dashed-虚线、dotted-点虚线、

ridge-凸槽、groove-凹槽

◆border-width-边框大小

写法：border-width：35px；

边框线默认样式有3个像素的宽。

◆border-color-边框颜色

写法：border-color：black；

其属性值为色值，即色值的五种写法都可使用。

◆border-image-图片边框

写法：border-image：url("图片路径")；

    设置图片边框图片所选的图片只会显示在元素的四个顶角，即只有元素的四个顶角会出现图片，并且这样的设置会覆盖掉线型的设置。

边框的缩写方式：

 border：width style color；

边框样式演示

#LOG#

05、列表类-list

◆list-style-type-项目符号类型

写法：list-style-type：circle；

-无序列表type属性：

disc-实心圆(默认值)

 square-实心方块

circle-空心圆

- 有序 列表type属性：

 1-数字项目符号

 A/a-字母项目符号

 I/i-罗马数字项目符号

◆list-style-image-图片项目符号

一般会在li中设置background-image代替

◆list-style-position：inside；

将列表项目符号放到列表项中，outside为默认值。

无序列表

由于在上一则边框样式没有做图片边框的演示，在此处做简单补充

有序列表

#LOG#

06、伪类-hover

◆伪类：

    设置选择元素基于的是当前元素所处的状态

写法：

    标签名：伪类名{

        声明；

    }

更多伪类介绍可前往自查：

https://www.runoob.com/css/css-pseudo-classes.html

hover-鼠标悬停时的效果演示

#LOG#

往期推荐：

学所·前端初级教程 | 前端基础之网页的基本结构

●

●

●

文字：Seongyeom自整笔记

排版：Seongyeom

封面图：来源百度图片