CSS入坑记录

CSS入坑记录

一.插入方式

1.内联样式表(行内样式)

<body style="background-color:green; margin:0; padding:0;"></body>

2.内嵌样式表(内部样式)

<style type="text/css"></style>

3.外部样式表

<link rel="StyleSheet" type="text/css" href="style.css">

二.选择器

1.标签选择器

p {font-size:15px;}

2.类选择器

.class_name {font-size:15px;}

3.ID选择器(去掉那个括号直接使用#,囧)

(#)id_name {font-size:15px;}

4.组合选择器

h1,h2,h3 { font-size: 14px; color: red;  }

5.子类选择器

<h1><strong></strong> <strong></strong></h1>
h1 > strong {color:red;}

6.后代选择器

<h1><em></em></h1>
h1 em {color:red;}

7.属性选择器

<a title="">
<a href="">
<a title="" href="">
*[title] {color:red;}
a[href] {color:red;}
a[href][title] {color:red;}

8.伪类

  • a:link 正常连接的样式
  • a:hover 鼠标放上去的样式
  • a:active 选择链接时的样式
  • a:visited 已经访问过的链接的样式

9.伪属性

  • a:first-line
  • a:first-letter
  • a:before
  • a:after

10.优先级问题

  • ID>Class>HTML
  • 同级时选择离元素最近的一个的

三.常用样式

1.颜色属性

  • color属性定义文本的颜色
  • color:green
  • color:#000000
  • color:#000 简写形式
  • color:rgb() rgba()

2.字体属性

3.背景属性

4.文本属性

5.边框属性

6.列表属性

四.盒子模型

1.element

2.padding

3.border

4.margin

五.布局

六.单位

  • % (百分比)
  • in (英寸)
  • cm 厘米
  • mm 毫米
  • px 像素

七.CSS3

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,844评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,654评论 32 459
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,103评论 0 1
  • CSS 1、介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种,IE盒子模型、W3C...
    京程一灯阅读 1,761评论 3 26
  • 越是畏惧他们 就越去讨好他们 而真正能够让你在他面前露出可憎面孔的人才是你最亲近的人。 1 “生れて,すみません。...
    乔十五阅读 4,378评论 1 4