当前位置: 首页 > 工具软件 > wysiwyg-css > 使用案例 >

【css基础】

哈栋
2023-12-01

css基础

CSS:是一种用于修饰网页的文本样式语言,还可以配合Javascript脚本语言动态对网页各元素操作。
1、内联方式(行内样式)

<p style="color:red">在HTML中如何使用css样式</p>

2、内部方式(内嵌样式),在head标签中使用

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

3、外部导入方式(推荐),在head标签中使用

<link href="main.css" type="text/css" rel="stylesheet"/>

选择器

选择器:需要改变样式的HTML元素
格式:选择器{属性:值;属性:值;属性:值;…}
常见选择器:标签选择器、类选择器、ID选择器、派生选择器

元素选择器:

使用html标签作为选择器,为指定标签设置样式。
示例1:h1元素设置样式

h1 {
color: red;
font-size: 14;
}

示例2:多个元素设置样式

h1,h2,h3,h4,h5,h6 {
color: green;
}

示例3:子元素会继承最高级元素所有属性

body {
color: #000;
font-family: Verdana, serif; /*字体*/
}

选择器:ID

id选择器:使用“id”作为选择器,为指定id设置样式。
使用格式:#id名{样式…}
特点:
•每个id名称只能在HTML文档中出现一次
•在实际开发中,id一般预留JavaScript使用

第一步:给标签指定id

<p id="t">...</p>

第二步:针对id设置样式

#t {
color: red;
}

选择器:类

类选择器:使用“类名”作为选择器,为指定类设置样式。
使用格式:.类名{样式…}
第一步:给标签指定类

<p class="c">...</p>

第二步:针对类设置样式

.c {
color: red;
}

选择器:派生

派生选择器:依据元素在其位置的上下文关系来定义样式
示例:

<style type="text/css">
.c p {
color: red;
}
</style>
<div class="c">
<h1>一号标题</h1>
<p>这是一个段落</p>
</div>

CSS常用属性:内边距和外边距

padding(内边距):元素到div内边框的距离
margin(外边距):元素div距离父级元素div边缘的距离
border:元素div边框宽度
示例:

padding:10px 5px 15px 20px #上右下左
padding:10px 5px 15px #上右下
padding:10px 5px #上右
padding:10px #四边都是10px

内边距:
padding 设置四边的内边距
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
外边距:
margin 设置四边的外边距,使用方法同padding
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距

CSS常用属性:字体font-*

属性描述
font-size设置字体的尺寸xx-small、x-small、small、medium、large、x-large、xx-large,从小到大,默认值medium
length固定长度,例如12px
font-family字体系列。可以写多个,如果第一个不支持,使用下一个
font-weight设置字体的粗细normal默认值
bold粗体
bolder更粗
lighter更细<
font-style字体样式normal正常
italic斜体
oblique倾斜的字体

CSS常用属性:文本

属性描述
color字体颜色颜色名称,例如red
十六进制值,例如#ff0000
rgb 代码,例如rgb(255,0,0)
text-align文本对齐方式left左边
right 右边
center 中间
justify 两端对齐文本效果
text-decoration文本修饰none 默认,定义标准的文本,例如去掉超链接下划线
line-through 删除线
underline 文本下加一条线
text-overflow文本溢出后显示效果clip 修剪文本
ellipsis 显示省略号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本
letter-spacing字符间的距离normal 默认
length 自定义间距
line-height行间的距离(行高)normal 默认
length 设置固定值

CSS常用属性:边框border-*

border	所有边框样式的缩写
示例:border: 1px solid blue; 宽度样式颜色
border-radius	圆角边框 直接写像素
box-shadow	给元素添加阴影:
**格式:**
box-shadow: h-shadow v-shadow blur spread color inset;
•h-shadow 必选,水平阴影的位置
•v-shadow 必选,垂直阴影的位置
•blur 可选,模糊程度
•spread 可选,阴影的大小
•color 可选,阴影的颜色
•inset 可选,从外层的阴影(开始时)改变阴影内侧阴影
示例1:box-shadow: 1px 2px 3px 1px #c2c2c2;
示例2:box-shadow: 0 5px 20px 0 #e8e8e8;

CSS常用属性:背景background-*

background-color
描述:背景颜色
•颜色名称,例如red
•十六进制值,例如#ff0000
•rgb 代码,例如rgb(255,0,0)
background-image
描述:背景图片
•url('URL') 图片路径
•none 不显示背景图片
background-repeat
描述设置是否及如何重复背景图像
•repeat 默认。背景图像将在垂直方向和水平方向重复
•repeat-x 背景图像将在水平方向重复
•repeat-y 背景图像将在垂直方向重复
•no-repeat 背景图像将仅显示一次
background-position
描述:背景图片的位置
•left、top、top right、center left、center center、center right、bottom left、bottom center、bottom right
•x% y% 水平位置和垂直位置
background-size
描述:背景图片的尺寸
•length 背景的高度和宽度,例如80px 60px
•percentage 以父元素的百分比设置背景图像的高度和宽度,例如50% 50%

CSS常用属性:Flex弹性布局

在之前要控制HTML元素的布局,会用到padding、margin、postion、float等方法,经过反反复复调试才能实现效果。
自从Flex弹性布局出现,一切似乎豁然开朗!
启用Flex布局,只需要在外部元素设置display:flex属性。
Flex布局有一个隐式的坐标空间,水平方向有一条主轴,垂直方向有一条交叉轴:
改变主轴(横向)的布局

justify-content:
•flex-end:右对齐
•center:居中对齐
•space-evenly:平分空间
•space-between:两端对齐

改变交叉轴(竖向)的布局:

align-items
•flex-end:靠下对齐
•center:居中对齐

调整空间占比(子元素宽度):

例如第一个元素三分之一,第二个元素占三分之二,第三个元素占三分之一:flex:1;flex2;flex1
 类似资料: