02-css基础和选择器

css:层叠样式表
我们称之css样式表或级联样式表， 网页的美容师，用来美化页面

html主要做结构，展示元素内容，只关心内容语义，能写些简单的样式

结构html 和样式css 分离

<style></style>

写在html的head里面，

• 语法构成：

• 选择器

• 一条及多条声明

• 代码风格：

  • 样式格式：

  • 紧凑型: h3{color:red;font-size:12}

  • 展开型:通用方式
    h3 {
    color: red;
    font-size: 12
    }

  • 大小写：使用小写方式

  • 空格方式：

  • 选择器和大括号之间保留空格

  • 在属性冒号:后保留空格
    -命名规范:

  • 长名字用中隔线来命名，比如 star-sing

  • 最好用英文字母来表示

  • 常用:
    头：header
    内容：content/container
    尾：footer
    导航：nav
    侧栏：sidebar
    栏目：column
    页面外围控制整体布局宽度：wrapper
    左右中：left right center
    登录条：loginbar
    标志：logo
    广告：banner
    页面主体：main
    热点：hot
    新闻：news
    下载：download
    子导航：subnav
    菜单：menu
    子菜单：submenu
    搜索：search
    友情链接：friendlink
    页脚：footer
    版权：copyright
    滚动：scroll
    内容：content
    标签页：tab
    文章列表：list
    提示信息：msg
    小技巧：tips
    栏目标题：title
    加入：joinus
    指南：guild
    服务：service
    注册：regsiter
    状态：status
    投票：vote
    合作伙伴：partner

• css选择器

  • 基础选择器

    • 标签选择器: 用html的标签名

      • 优点：能快速的为同一类型标签设置样式
      • 缺点：不能涉及差异化样式

    • 类选择器: .class

      • 可以被使用多次
      • 一个标签可以有一个或多个类名，用空格分开，达到更多的选择目的
      • 使用的最多，一般用于样式上
      • 公共样式提取到一个类里面

        ex: class ="nav-bar greenstyle bigstyle"
        

    • id选择器: #id

      • 只能一个元素使用，因为id是唯一的
      • 一般用于页面唯一元素上，经常与js搭配使用

    • 通配符选择器: * 选择所有

• 字体

  • font-family:字体系列
    • 多个字体需要用英文逗号隔开，浏览器会按顺序查找使用，
    • 如果字体中间有空格，需要加引号""，ex:“Microsoft Yahei”
    • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能是正确使用
  • font-size:字体大小
    • 常用单位px
    • chrome默认大小16px
    • 不同浏览器默认字号不一致，尽量指定大小，不要默认指定整个大小,可以给body指定整个页面文字大小
    • 标题标签特殊，需要单独制定文字大小, h1-h6
  • font-weight:字体粗细
    • normal: 默认
    • bold: 粗体
    • bolder: 特粗体
    • lighter:细体
    • 数字: 实际开发中使用数字，没有单位, 比如 400-normal, 700-bold
  • font-style:文本风格

    • normal 默认

    • italic 斜体,类似 em标签。很少使用，一般是让em斜体标签不倾斜，

      		em {
      				font-style:normal
      		}
      

  • 符合属性:
    font: font-style font-weight fontsize/line-height font-family
    • 不能更换顺序
    • 之间用空格隔开
    • font-size和font-faimly必须填写，其他的可以省略

• 文本

  • color: 文字颜色

    • 预定颜色 ex:red, green
    • 十六进制 常用方式 ex:#ff0000
    • RGB代码 ex:rgb(255,255,0) 或者 rgb(100%, 100%, 0%)

  • text-align 设置文本的水平对齐方式

    • left 左对齐
    • right 右对齐
    • center 居中
      如果想让图片居中，可以设置它的父节点 text-align:center

  • text-decoration 添加文本的修饰，添加下划线，上划线，删除线

    • none 无线 默认，比掉链接a自带的下划线 text-decoration:none
    • underline 下划线
    • linethrough 删除线
    • overline 上划线

  • text-indent 首行缩紧，通常用于段落首行缩紧

    • 单位em 相当于当前元素文字的一个大小，如果当前没有文字，会继承父元素的文字大小

    ex: 缩紧2个文字的距离

    div {
    			text-indent:2em
    		}
    

  • line-height 行间距 行与行之间的距离

    行间距由三部分组成:

    上间距
    文字高度
    下间距

    ex:设置 line-height: 26px 文字16px 那么上间距和下间距就是 （26-16）/2 = 5

• css引入方式
  css样式表有：

  • 内部样式表（内嵌样式表）
    • 在html的style中，可以放在html任何位置，一般放知道head里面
    • 作用整个页面的元素
    • 练习、测试时使用，一般不使用
  • 行内样式表 （行内式引用）
    • 书写简便，权重高
    • 在标签内部写
    • 只能作用当前标签
    • 不推荐使用
  • 外部样式表
    • 实际开发推荐使用的
    • 完全实现结构和样式相分离
    • 书写到单独的文件中，之后把css引入到html页面中使用,用link标签引入:

       <link rel="stylesheet" href="01.css">
      

• emment 语法

  • 快速生成html结构语法：

    • 多个相同标签可以用: div*3 中间没有空格

    • 父子标签: div>span
      ex:

       <div><span></span></div>
      

    • 兄弟标签: div+span

    • class: div.demo1
      ex:

      <div class="demo1"></div>
      

      • div.demo$*5 生成5个class属性从demo1->demo5的div
        $符号代表从1开始的递增数字

    • id: div#demo

      <div id="demo"></div>
      

    • 带文字标签: div{demotest}*5

  • 快速生成css样式:

    • 首字母缩写: tac: text-align:center

  • 复合选择器:

    • 子选择器: 元素1 > 元素2
      • 只能选择作为元素1的最近一级子元素，子子元素不包含在内，所以也叫亲儿子选择器
        ex: .demo > a 只会把class是demo下的最近的子元素包括，如果子元素没有a则无效，子子元素的a不负责更改
    • 后代选择器: 元素1 元素2
      • 又称为包含选择器，选择元素1里面的所有元素2
      • 元素2只要是元素1的后代即可, 可以是儿子，可以是孙子，都可以选出来
      • 元素1和2可以是任意的选择器
    • 并集选择器:
      • 可以选择多组标签，同时为他们定义相同的样式，一般用于集体声明
      • 用逗号分开，竖着写

  • 伪类选择器

    • 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第一个，第n个元素

    • 用冒号:表示，比如:hover :first-child

    •   	```css
        	div,
        	p,
        	.pig li {
        		color:pink;
        	}
        	```
      

    • 链接a:

      • :link, :visited, :hover, :active
      • 为确保生效，请按照 LVHA的循序声明:

      a:link 表示没有点击过的链接
      a:visited 表示已经点击过的链接
      a:hover 表示鼠标经过的时候
      a:active 表示鼠标按下没有弹起的时候

      • 因为a有默认样式，需要给a单独制定样式

    • :focus

      • 元素获得光标的时候
      • 主要针对 input类元素
        ex: 当光标在input标签上的时候背景色变为黄色
        input:focus {
        background-color:yellow;
        }