标签：标签 基础 字体 font 取值 选择器 CSS 属性
CSS基础
CSS：层叠样式表
- CSS写在style标签中，style标签一般写在head标签里，title标签下面
- 选择器：{属性名：属性值; }
- ctrl+/快捷键显示CSS注释
- 选择器：查找标签
<style>
p{
color:red;
font-size:30px;
}
</style>
CSS引入方式
-
内嵌式：CSS写在style中
- style标签虽然可以写在页面任意位置，但通常写在head标签中
- 作用范围：当前页面
- 使用场景：小案例
-
外联式：CSS写在一个单独的CSS文件中
- 需要通过link标签在网页中引入
- 作用范围：多个页面
- 使用场景：项目中
-
行内式：CSS写在标签的style属性中
- 配合js使用
- 作用范围：当前标签
- 使用场景：配合js使用
基础选择器
标签选择器
- 结构：标签名{css属性名:属性值;}
- 注意：
- 标签选择器选择一类标签，而不是单独一个
- 标签选择器无论嵌套关系多深，都能找到对应的标签
类选择器
- 结构：.类名{css属性名:属性值;}
- 注意：
- 所有标签上都有class属性，class属性的属性值为类名（类似于名字）
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
- 一个标签可以同时有多个类名，类名之间可以以空格隔开
这是一个段落
- 类名可以重复，一个类选择器可以同时选中多个标签
<style>
.one{
color: red;
}
</style>
<body>
<p class="one">这是一个段落</p>
<p>这是一个段落</p>
<div class="one">这是div标签</div>
</body>
id选择器
- 结构：#id属性值{css属性名：属性值；}
- 注意点：
- 所有标签上都有id属性
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
通配符选择器
- 结构：*{css属性名：属性值；}
- 作用：找到页面中的所有标签，设置样式
文字基本样式
字体大小
- 属性名：font-size
- 取值：数字+px
- 注意点：
- u按键自谷歌浏览器默认文字大小是16px
- 单位需要设置，否则无效
字体粗细
-
属性名：font-weight
-
取值：
-
关键字：
正常 normal 加粗 bold -
纯数字：100~900的整百数
正常 400 加粗 700
-
文字倾斜
- 属性名：font-style
- 取值：
- 正常（默认值）：normal
- 倾斜：italic
字体系列
-
属性名：font-family
-
常见取值：具体字体1，具体字体2，具体字体3，……，字体系列
-
渲染规则：
- 从左到右按照顺序查找，如果电脑中未安装改字体，则显示下一个字体
- 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
-
常见字体：
- 无衬线字体：sans-serif
- 衬线字体：serif
- 等宽字体：monospace
样式的层叠问题
- 如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖）
字体font相关属性的连写
-
属性名：font（复合属性）
-
取值：
font：style weight size family
-
省略要求：
只能省略前两个，如果省略了相当于设置了默认值
-
注意点：如果要同时设置单独和连写形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
字体和文本样式
文本缩进
- 属性名：text-indent
- 取值：
- 数字+px
- 数字+em（推荐：1em=当前标签的font-size的大小）
文本水平对齐方式
-
属性名：text-align
-
取值：
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
- 如果需要让文本居中，text-align属性给文本所在标签（文本的父元素）设置
- text-align：center能让哪些元素水平居中：
- 文本
- span标签、a标签
- input标签、img标签
- 注意点：如果需要让以上元素水平居中，text-align：center需要给以上元素的父元素设置
文本修饰
-
属性名：text-decoration
-
取值：
属性值 效果 underline 下划线（常用） line-through 删除线（不常用） overline 上划线（几乎不用） none 无装饰线（常用） -
开发中会使用text-decoration：none；清除a标签默认的下划线
行高
-
属性值：line-height
-
取值：
- 数字+px
- 倍数（当前标签font-size的倍数）
-
应用：
- 让单行文本垂直居中可以设置line-height：文字父元素高度
- 网页精准布局时，会设置line-height：1可以取消上下间距
-
行高与font连写的注意点：
- 如果同时设置了行高和font连写，注意覆盖问题
- font：style weight size/line-height family；
Chrome调试工具
- 右键检查
- Fn+F12
颜色取值
-
属性值
颜色表示方式 表示含义 属性值 关键词 预定义的颜色名 red、blue、green rgb表示法 红绿蓝三原色，每项取值范围：0~255 rgb（0,0,0）、rgb（255,255,255）…… rgba表示法 红绿蓝三原色+a表示透明度，取值范围是0~1 rgba（255,255,255,0.5）…… 十六进制表示法 #开头，将数字转换成十六进制表示 #000000、#ff0000、简写：#000、#f00…… -
标签水平居中margin：0 auto
标签：标签,基础,字体,font,取值,选择器,CSS,属性 来源： https://www.cnblogs.com/jyxlnky/p/16515613.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。