7 - CSS

外连样式(推荐)

  • <link rel="stylesheet" href="style.css"> html语法
  • @import "style2.css";css语法

内连样式

  • <style></style>html语法 (一般放入<head>里面)


选择器

1 基础选择器

  • 基本选择器*:通用元素选择器
  • 基本选择器#id:匹配特定的id
  • 基本选择器.class:匹配class包括特定的元素
  • 基本选择器elemengt:标签选择器

2 常见伪类选择器

a链接常用的写法
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击链接
E:active 匹配鼠标已经其上按下的E元素
E:hover 匹配鼠标悬挂其上的E元素
E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
E:nth-of-type(n) 与E:nth-child(n)作用类似, 但是仅匹配适用同种标签的元素
E:nth-last-of-type(n) 与E:nth-last-child(n)作用类似, 但是仅匹配适用同种标签的元素

编写小技巧

image

HTML:<body> <div id=header> <div id=content> <div id=footer>
CSS:#header .logo{} #content .xxx{}

  • {color:red}字体红色
  • {border:1px solid:red}边框红色
  • {font-size:30px}字体大小
  • id与class区别?
    id定义的是页面上唯一的元素。class定义的是页面上某一类的元素。
  • CSS注释
    /* 注释 */
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • class 和 id 的使用场景? class写专门的class通用和私有模块命名,id具有唯一性且优先级太高,用...
    好好顽阅读 419评论 0 0
  • 太阳在落山 你在发呆 北方的五月 没有热也没有冷 你想看夕阳 也想看田野 躺在还没长好的草上面 五月的风还没长大 ...
    一只小靴猫阅读 292评论 0 0
  • 这本书是之前看过的,这周又随手翻翻,重温了一下,特意看了他演讲的那一段。 我曾经问过几个做技术的同事,你认为苹果公...
    考拉在读书阅读 186评论 0 1
  • 无论想的有多透彻,多明白!积攒了多少勇气,这几日的失眠吃不下东西都是现实,我不得不逼着自己吃饭,让自己睡觉...
    四个圈的宝儿阅读 176评论 0 1