border和字体类型知识点笔记

一、 文字属性

1. color字体颜色
   color属性：用于定义文字的颜色。

2. font-size字号
   font-size属性:设置文字的大小。 属性值只要求数字加单位，可以是百分比，其他不需要掌握。常用的网页文字大小有12px(正文)、14px（标题）

3. font-family字体： “黑体”“宋体”“微软雅黑” 首先执行第一个字体
   font-family属性：设置字体，如宋体、黑体、隶书等。字体的表示方式只要求掌握字体名称，其他不要求掌握。

4. font-weight字体加粗 normal普通字体100-500
   bold 设置粗体
   normal将粗体改为正常字体

5. font-style字体倾斜（倾斜方式： i em address font-style ）
   italic倾斜
   normal普通字体
   二、 段落属性

6. 文字修饰（text-decoration）:p默认情况下是text-decoration：none；
   underline下划线
   overline 上划线
   line-through删除线
   none 无修饰

7. 水平对齐方式（text-align） 默认 left
   text-align属性：设置文本的水平对齐方式。属性值可以设置为left、center、right等，即如何为文本设置左对齐、居中对齐和右对齐。

8. 文本缩进（text-indent） 假如设置一个比较大的负数，可以做出文字消失效果
   text-indent属性：设置文本块中首行的缩进，属性值可设置为数值加单位或者用em设置缩进几个字，百分比和负值不要求掌握。
   如：p{text-indent:24px} 或 p{text-indent:2em;}

9. 文本行高 (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; --下划线

   	}
   

10. 边框属性【块级标签】
    #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;}

• 列表
• 列表2
• 列表3