当前位置：首页 > article >正文

border和字体类型知识点笔记

article 2025/9/14 14:50:09

一、文字属性

color字体颜色
color属性：用于定义文字的颜色。
font-size字号
font-size属性:设置文字的大小。属性值只要求数字加单位，可以是百分比，其他不需要掌握。常用的网页文字大小有12px(正文)、14px（标题）
font-family字体： “黑体”“宋体”“微软雅黑” 首先执行第一个字体
font-family属性：设置字体，如宋体、黑体、隶书等。字体的表示方式只要求掌握字体名称，其他不要求掌握。
font-weight字体加粗 normal普通字体100-500
bold 设置粗体
normal将粗体改为正常字体
font-style字体倾斜（倾斜方式： i em address font-style ）
italic倾斜
normal普通字体
二、段落属性
文字修饰（text-decoration）:p默认情况下是text-decoration：none；
underline下划线
overline 上划线
line-through删除线
none 无修饰
水平对齐方式（text-align）默认 left
text-align属性：设置文本的水平对齐方式。属性值可以设置为left、center、right等，即如何为文本设置左对齐、居中对齐和右对齐。
文本缩进（text-indent）假如设置一个比较大的负数，可以做出文字消失效果
text-indent属性：设置文本块中首行的缩进，属性值可设置为数值加单位或者用em设置缩进几个字，百分比和负值不要求掌握。
如：p{text-indent:24px} 或 p{text-indent:2em;}
文本行高 (line-height) 如果line-height 和 height的值一样，则可以做出文字垂直居中效果
line-height属性：设置行间距，即行高。属性值可设置为数值加单位，百分比和负值，负值不要求掌握。
代码：
p.show{
letter-spacing: 29px;/字母之间的间距/
word-spacing: 3px；–空格的宽度
border: 1px solid red; --边框
line-height: 150px; --行高
text-align: center;/对齐方式/
text-indent: 10px;/首行缩进/
text-transform: capitalize;/首字母/
text-shadow: 10px -10px 5px cornflowerblue;/文本阴影/
text-decoration: underline; --下划线
```
	}
```
边框属性【块级标签】
#yy{
border-style: dashed;/*边框虚线实心 solid */
border-width: 2px;
border-color: blue;
height: 100px;
width: 100px;
border-top-style: solid;/*顶部边框样式
}
div.love{/圆角边框/
border: 1px solid red;
height: 100px;
width: 100px;
border-radius: 50px;/边框圆角半径 50 就是园了/
box-shadow: 10px 10px 2px red;/盒子的阴影/ box-shadow: 0px 0px 10px #000000;/黑色无偏移量/
}

hello,my name is yolanda

ai 也可以对图片设置

img样式规则{} 可以简写： Border:2px solid red; boder-left:2px dashed bule; Height:100px; boder-bottom:2px solid red; Width:100px; 三、背景属性background 背景属性包含背景色，背景图，背景重复，背景位置，背景附件和背景复合属性等。背景颜色background-color 背景图片background-image:url(); 背景重复：background-repeat: 属性值：repeat/no-repeat/repeat-x/repeat-y 背景位置：background-position:水平垂直; 怎么使背景图片居中？ Background-position:center; 全选 Background-position:50% 50%; Background-position:50% center; Background-position:center 50%; 可以取的值为关键字，数值，百分比水平：left center right（或者数值）垂直：top center bottom（或者数值）背景附件（背景是否滚动属性值：scroll（默认）滚动 fixed 固定）： background-attachment:fixed；谷歌浏览器开启：chrome://flags/#overlayscrplbars

四、列表案例符号的样式 list-style
list-style-type 定义列表前面的项目符号
Disc(实心圆)、circle(空心圆)、 square（方块）、 none（不使用任何标号）。
list-style-image 定义列表项标志的图像【设置了图片上面的不好用了最好上个属性设置成none】
语法格式如下：list-style-image:none|url(url)
list-style-position 列表位置
语法格式如下：list-style-position:outside（默认）|inside（）在列表li的里面还是外面
去掉列表案例符号的代码是: ul{list-style:none;}