博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【css学习整理】css基础(样式,语法,选择器)
阅读量:5128 次
发布时间:2019-06-13

本文共 1271 字,大约阅读时间需要 4 分钟。

  CSS是什么?

  • cascading 层叠样式表
  • sheet 样式文件
  • style 外观个性化

  CSS语法?

  • 声明方法: 选择器(属性: 值; 属性: 值)
  • 选择器: 通过名称制定对哪些标签进行样式设置, 每一对属性之间用分号,属性与值之间用冒号
  • css注释: /* 注释内容 */ 不管是单行还是多行,都只有这一种方法

  CSS基本选择器?

  • style属性,行内样式,直接写在标签里,  style="font-size:20px; color: blue;"
  • 标签选择器: 直接针对HTML标签设置样式   <style type="text/css"> p{color:red;font-size:30px;}</style>
  • ID选择器: 以#开头,名称以字母开头,区分大小写   #test{color:red;}         <p id="test">hello world</p>
  • 类选择器: 以" . "开头,后跟类名,规范:以小写字母开始   .test{color:aqua;}  <p class="test"> hello world</p>
  • 通配符选择器: *{css规则} 针对当前页面所用的标签应用同样的样式(对标签的初始化),例如: *{margin: 0;padding: 0;border:0}
  • 关联选择器: p .aa{} 表示p标签下面的aa类选择器     p>aa{} 表示p标签下的子级  p.aa 同时具备p和aa的标签
  • 伪类选择器: 类有一个状态,可以被多个元素访问,超链接有4个状态,其它标记只能支持hover 
    • :link   正常链接的时候
    • :visited 已经点击访问完的状态
    • :hover 当鼠标移上去的状态
    • :active 当鼠标点击下去的状态

  按CSS位置来分类样式?

  • 内嵌样式,在HTML页面中以<style>开头
  • 外部样式,引入外部css
    • 链接的形式: <link rel="stylesheet" type="text/css" href="static/css/home.css">
    • 导入 @import url ("/static/css/home.css")
    • 链接样式和导入样式的区别, import既能在HTML中引入样式,也能在css样式文件中导入外部样式,链接样式只能在HTML页面中引入样式。

    css文本属性

  • color: 文本颜色,单词,16进制
  • text-align: 文本对齐方式  left right center
  • line-height: 行高,设置垂直方向居中,所在容器元素的高度与line-height保持一致
  • text-indent: 缩进,例如: 2em
  • letter-spacing: 字间距
  • text-decoration: 文本描述,修饰: underline 下划线, overline上划线, none
  • css列表属性: list-style: none

转载于:https://www.cnblogs.com/dreamyu/p/9144143.html

你可能感兴趣的文章
第五章笔记
查看>>
Iroha and a Grid AtCoder - 1974(思维水题)
查看>>
gzip
查看>>
转负二进制(个人模版)
查看>>
LintCode-Backpack
查看>>
查询数据库锁
查看>>
[LeetCode] Palindrome Number
查看>>
我对于脚本程序的理解——百度轻应用有感
查看>>
SQL更新某列包含XX的所有值
查看>>
网易味央第二座猪场落户江西 面积超过3300亩
查看>>
面试时被问到的问题
查看>>
spring 事务管理
查看>>
VS2008 去掉msvcr90的依赖
查看>>
当前记录已被另一个用户锁定
查看>>
Bootstrap
查看>>
Node.js 连接 MySQL
查看>>
ACM-ICPC 2018 world final A题 Catch the Plane
查看>>
那些年,那些书
查看>>
面向对象六大基本原则的理解
查看>>
注解小结
查看>>