HTML+CSS基础

1、基本选择器

 

选择器是用来获取到需要添加样式的标签的一些符号。

1.1、标签选择器

 

通过标签名选择

    div{ ... }

    p{ ... }

    ul{ ... }

1.2、类选择器

 

通过标签的类型（class属性）选择

    .className{ ... }

 

1.3、通配符

 

选择所有的标签

    *{  ... }

    /* 通常用来去除所有标签的默认内外边距（项目中不建议）*/

    *{

            margin: 0;

            padding: 0;

    }

 

1.4、ID选择器

 

通过标签的id属性名选择

    #id{  ... }

id命名规则，同class属性，但是id具有唯一性，同一个页面id名不允许重复,一个标签只能起一个id

2、文本字体样式

 

2.1、font系列

 

2.1.1 font-size 字体大小

 

    font-size:20px;

2.1.2 font-weight 字体加粗

 

    font-weight:normal; 默认值，不加粗

    font-weight:bold; 加粗

2.1.3 font-style 字体风格

 

    font-style:normal; 正常

    font-style:italic; 斜体

2.1.4 line-height 行高

 

行高指的一行字字体高度加上前后多占的一部分空间，行高越大行间距越大

单行文本垂直居中：把行高设置为盒子的高度

    line-height:30px;

    line-height:2;  // 表示字体大小的倍数

2.1.5 font-family 字体系列

 

    font-family:"微软雅黑";

    font-family:"宋体";

    font-family:Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;  // 设置字体的列表，浏览器会识别第一个支持的字体

2.1.6 font 简写

 

简写属性顺序不能随意更换

可以省略部分属性，至少保留 font-size 和font-family

    font: italic bold 20px/2 "宋体";

    font: 20px "宋体";

 

2.2 text系列

 

2.2.1 text-align 文本对齐

 

    text-align:left;

    text-align:center;

    text-align:right;

2.2.2 text-indent 首行缩进

 

    text-indent:2em;  // 缩进两个字

2.2.3 text-decoration 文本修饰

 

    text-decoration:none;  //没有修饰

    text-decoration:line-through; //删除线

    text-decoration:underline; //下划线

    text-decoration:overline; //上划线

 

2.2.4 color 文本颜色

 

    color:red;

2.2.5 letter-spacing 字符间距

 

    letter-spacing: 20px;

2.2.6 word-spacing 单词间距

 

    word-spacing:20px;