学习前端第二天之css层叠样式

一、设置样式公式

  选择器 {属性:值;}

二、font 设置四大操作

  font-size:字体大小 (以像素为单位)

  font-weight:字体粗细

  font-family:字体    ( 可直接跟字体或者16进制 如:"微软雅黑")

  font-style: 字体风格 (em 和i 标签也能倾斜)

    normal:正常

    italic:斜体

  font:综合设置字体样式

    选择器 {font: font-style font-weight font-size/line-height font-family}

    ps: 顺序不能更改 不需要设置的属性可以省略 必须保留font-size 和font-family

三、基础选择器

  1.标签选择器(直接写标签)

  p {

    font: iltic 700 14px "微软雅黑"
  }

  2.ID选择器

    定义: id="big"

    调用: #big

  3.类选择器

    定义: class="tou"

    调用: .tou

  3.通配符选择器

    * 值所有的标签
    直接调用
    * {
      color: red;
     }

四、链接伪类选择器 (多用于a标签  )

  :link 未访问的链接

  :sisited 已访问的链接
  :hover 鼠标移动到链接上
  :active 选定的链接 (点击不松开的时候的状态)

  顺序不能变 lvha 常用的就link 和hover

五、结构位置伪类选择器

  :first-child: 选取属于其父类元素的首个子元素的指定选择器
  :last-child: 选取属于其父类元素的最后一个个子元素的指定选择器
  :nth-child(n): 匹配属于其父元素的第N个子元素
    nth-child(even) 选出所有偶数
    nth-child(odd) 选择所有基数
  :nth-last-child: 选择器匹配属于其元素的第个子元素的每个元素

六、目标伪类选择器 (多用于设置锚点的时候用)

  :target
  用法::target {
        color: red;
     }

七、css设置颜色的三种方式

  1. 单词
  2. 16进制
  3. rgb(255,255,255)

八、css命名规范

1. 长名称或词组可以使用中横线来为选择器命名
        c-orange   color-orange
2. 不要用下中横线
头:header
内容:content/container
尾:footer
侧栏:sidebar
导航: nav
栏目: column
页面范围控制整体布局宽度:wrapper
左中右: left center right
登录条:loginbar
标志:logo
广告: banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航: subnav
菜单:menu
子菜单: submenu
搜索: search
友情链接: friendlink
页脚: footer
版权: copyright
滚动: scroll
标签页: tab
文章列表: list
提示信息: msg
小技巧: tips
栏目标题: title
View Code

九、行高对齐和首行缩进

  text-align  水平对齐方式 (center left right)

  line-align  行间距  (px为单位)

  text-indent 首行缩进 (em为单位  em代表一个汉字的距离)

  letter-spacing  字间距

  word-spacing  单词间距

十、颜色半透明

  color: rgba(255,0,0,0.5); 取值范围0-1

十一、文字阴影

  h-shadow 水平阴影的位置,允许负值
  v-shadow 垂直阴影的位置
  blur 可选 模糊的距离
  color 可选 阴影的颜色
  text-shadow: 1px 11px 3px rgba(0,0,0,0.4);

猜你喜欢

转载自www.cnblogs.com/guniang/p/11868793.html