css笔记

css笔记

1、CSS定义

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。
书写位置：title 标签下方添加 <style> 双标签，</style> 标签里面书写 CSS 代码。

<title>CSS 初体验</title>
<style>
/* 选择器 { } */
p {
/* CSS 属性 属性名:属性值; */
color: red; /* 键值对 */
}
</style>
<p>体验 CSS</p>

2、CSS引入方式

内部样式

​ 内联样式(行内样式)：CSS 写在HTML标签的 style 属性值里

​ 内部样式表：推荐CSS 代码写在 style 标签里面，注意：写在其他任何地方都可以

外部样式

​ 外部样式表：CSS 代码写在单独的 CSS 文件中（.css）

​ 在 HTML 使用 link 标签引入

​ <link rel=“stylesheet” href=“./my.css”>

3、CSS选择器

基础选择器

• 标签选择器

  选中同名标签，设置相同样式。

  注意：标签选择器无法差异化同名标签的显示效果。

• 类(class)选择器 .class

  ​ 类名自定义，但是不能是数字开头或纯数字和中文，尽量用英文或- _ 等
  一个类选择器可以供多个标签使用

  一个标签可以使用多个类名，类名之间用空格隔开

  开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd

• id选择器 #id
  注意：一般不用id设置样式
  在和JavaScript配合使用的时候id是唯一的，一个id在一个HTML页面只能使用一次

• 通配符选择器

  查找页面所有标签，设置相同样式。
  通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

  * {
      margin:0;
      padding:0;
  }
  

4、文字控制属性

描述	属性	属性值	备注
字体大小	font-size	PC 端网页最常用的单位 px	谷歌浏览器默认字号是16px 谷歌浏览器字体大小最小12px
字体粗细	font-weight	100~900	400正常(normal) 700加粗(hold) 应用：h系列标签不加粗
字体倾斜	font-style	normal默认不倾斜 italic文字倾斜 oblique文本倾斜	italic和oblique浏览器效果一般没什么区别 清除文字默认倾斜
行高	line-height	数字 + px 数字/百分百（当前标签font-size属性值的倍数）	行高=上间距+文本高度+下间距 上下间距永远一致 行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）
字体族	font-family	Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif;	sans-serif无衬线字体
字体复合属性	font	font: 是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写);	字号字体必写
文本缩进	text-indent		通常2em
文本对齐	text-align	left center right
修饰线	text-decoration	none无(清除修饰性) underline下划线 line-through删除线 overline上划线
颜色	color	颜色英文单词 rgb(r,g,b) 0~255 rgba(r,g,b,a) a=> 0~1 #RRGGBB ，0~9 A~F	red green blue a表示透明度 ##000黑色#FFF白色#CCC灰色

总结

单行文字垂直居中，行高属性等于盒子高度属性值

text-indent 、text-align 属性目前只能给div、p这样独占一行的的标签
a，img标签不可以！！！！！！如果想设置给他们套个独占一行的盒子比如div p

text-align本质是控制内容的对齐方式，属性要设置给内容的父级