CSS简单笔记
buchiyexiao

  • CSS：层叠样式表，可以理解成给html页面标添加自定义样式

  • 注释：/* */ 和CPP注释一样

  • 语法规则：

    • 格式声明语句，要用{属性：属性值；}括起来，里面放很多格式声明语句
    • 属性是已经定义的CSS的属性
    • CSS样式必须写单位，CSS样式的数值单位用px像素 <0不写单位为0px>
    • HTML <标签 属性名=“属性值”><标签>
    • CSS 属性名：属性值；

  • 引用方法

    • 行内引用
    <div style="background:red;">我是内容</div>
    • 内嵌引入
    <style type="text/css">
	div{
		background:red;
	}
</style>
    • 外部引入
    <head>
	<link rel="stylesheet" type="text/css" href="temp.css">
</head>
    • 一般而言，外部引入为引入的主流引入方式

  • CSS核心语法

    • 选择器 {属性名：属性值；属性名：属性值}

    • 选择器：我们可以简单的理解成为选择页面上元素的工具，基本选择器和复合选择器

    • 通用选择器：所有元素都可用的选择器 *{}

    • 标签选择器：指定了某个标签的选择器

    • 类选择器：.class名字 {} 指定某个类的选择器

    • ID选择器：#id名{} 指定某个id的选择器

    • 伪类选择器：

      a:link：未访问过的

      a:visited：访问过的

      a:hover：鼠标放上

      a:active：鼠标激活

      以上顺序不可以打乱

    • 分组选择器：不同之间用，隔开 选择器1 选择器2{}

    • 后代选择器：选择器1 选择器2{} 选择器1后代子子孙孙选择器2的元素

    • 子代选择器：选择器1 > 选择器2{} 选择器1后代儿子选择器2元素

    • 相邻兄弟选择器：选择器1 + 选择器2{} 选择器1和选择器2是兄弟（有同一个父亲）

    • 选择器的优先级

    #ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器
#把权重相加：得到的结果越大优先级越高
#如果优先级相同，后面的覆盖前面的

  • 属性

    • 尺寸
      • width：宽度，height：高度
    • 元素转换
      • display：block 块元素，inline 行元素，inline-block 行内块，none 不显示
    • 字体
      • font-size：大小
      • font-family：样式
      • font-style：倾斜 (italic倾斜，normal正常)
      • font-weight：加粗 (bold加粗，normal正常)
    • 文本
      • Color：颜色
      • Text-align：对齐（left，center，right）
      • Text-indent：首行缩进
      • Text-decoration：文本线（underline下划线，line-through中划线，overline上划线，none不显示)
      • letter-spacing: 字间距
      • word-spacing: 词间距
      • line-height：行高(让行高和高度相同，内容会垂直居中)