CSS 基础知识 初识

什么是CSS

CSS的作用是是：
  • 可以给网页中的每一个元素设置样式（化妆，排版布局），可以让页面更加精美
  • CSS提供可各种各样 丰富多彩的CSS样式。书写格式： color：red
如何将CSS样式应用到元素上
  1. 内联样式
  • 将样式直接写在元素的style属性上
    缺点：多个元素种样式修改繁琐
//分号隔开
<div style = "color: red ; background-color:blue"></div>
  1. 文档样式表 | 内嵌样式表
  • 将样式写在head元素中
  • 缺点： 无法多个HTML共用是
<style>
        div {
            background: red;
            color: blue;
            font-size: 14px;
        }
</style>
  1. 外部样式表
  • 创建一个CSS文件
@charset "UTF-8"; 
/*指定字符集*/
div {
    background-color: blueviolet;
    color: darkgreen;
    font-size: 14px;
};

/* 外部样式表 在HTML中引入 */
<link rel="stylesheet" href="css/page.css" type="text/css">
关键字 import， 效率比link低，所以不建议使用impor

作用：可以导入使用其他CSS文件

/*将当前HTML heade中加入style标签 内部@import*/
<style>
    @import "css/all.css";
</style>
网页图标
/* rel是icon href 可以是网络图片，也可以是本地图片，http可以省略 减少加载，节省流量 */
<link rel="icon" href="//www.jd.com/favicon.ico">
div元素
  • 一般作为其他元素的父容器，把其他元素包住，代表一个整体
  • 用于把网页分割为多个独立的部分
颜色
  • 颜色标识方式：
    1 . redColor 指定颜色
    2 . rgb(redValue,greenValue,blueValue) rgb值
    3 . 16进制表示法 eg #ffaa98 前两位ff标识redValue,中间aa 表示 greenValue， 98 表示blueValue ,并且 #345会自动转换成#334455（#rgb-->#rrggbb）
text-decoration 修饰线
<style>
        a {
            text-decoration: overline; /* 线在顶部 */
            text-decoration: underline; /*下划线*/
            text-decoration: line-through; /*中间划线*/
            text-decoration: none;  /*无划线*/
        }
</style>
<body>
<a href = "http://www.baidu.com">百度一下</a>
</body>
letter-spacing 字符间距离 word-spacing 单词间距
<style>
div {
            letter-spacing: 10px;
            word-spacing: 20px;
        }
</style>
text-transform
<style>
        div {
            text-transform: capitalize;
            /* capitalize  将每个单词的首字符变为大写 */
            /*uppercase 将每个单词的所有字符变为大写 */
           /* lowercase   */
            /*none*/
        }
    </style>
text-indent

设置第一行缩进
2em ：相对于font-size进行计算
2em 相当于 font-size * 2 ，所以会缩进2个字符

<style>
        div {
            width: 250px;
            text-indent: 2em;
            font-size: 20px;
            background: #f00;
        }
</style>
text-align

内容对齐方式

<style>
        div {
            text-align: left;
            /*  left: 左对齐 */
            /*  center: 居中对齐*/
            /*  right: 右对齐 */
            /*  adjust: 两端对齐 */
        }
</style>
font-size
  1. 具体数值 也可用em
<style>
       body {
            font-size: 10px;
        }
        div {
            font-size: 2em;
        }
       p {
            font-size: 2em;
        }
</style>

<body>
<div>
哈哈哈
<p>呵呵呵</p>
</div>
</body>
/* div的父元素body是10px，所以div的font就是2em就是20pt；p的父元素是div，所以p的font就是div的2em 即 40px */
  1. 百分比 基于父元素的font-size计算
div {
            font-size: 50%;
        }
/* 父元素的一半 */
font-family

自定义字体名称

<style>
       body {
            font-family: Consolas,"微软雅黑",Symbol;
        }
</style>

1.可以设置1个或者多个字体名称，从左到右依次选择字体，知道找到可用的字体，否则用默认

  1. 一般情况下，英文字体只适用于英文，中文字体同时适用于英文和中文
font-face

自定义字体
下载ttf等文件格式的字体文件

<style>
        @font-face {
            src: url("./font/seisou.ttf"); /* 指定路径文件 */
            font-family: "迷你字体";  /* 创建字体别称 */
        }
        div {
            font-family: "迷你字体";
            font-size: 50px;
        }
 </style>
<body>
<div>
12312312aaabbacc
</div>
</body>
font-weight

字体粗细（重量） 100 | 200|300~~~~900

<style>
        div {
            font-weight: 100;
           /* normal : 400 */
           /* bold : 600 */
        }
 </style>
font-style

设置文字的常规 斜体 显示

<style>
        div {
            font-style: normal;
           /* normal : 正规字体 */
           /* italic : 字体的倾斜显示 */
          /* oblique : 文本倾斜显示，如果该字体没有斜体时用 */
        }
 </style>
font-variant
<style>
        div {
            font-variant: normal;
           /* normal : 常规显示 */
           /* small-caps : 将小写字母大写后缩小显示 */
        }
 </style>

CSS选择器

按照一定的规则选出符合条件的元素，为之添加CSS样式，种类分为（通用选择器，类型选择器，类选择器，id选择器，属性选择器，组合，伪类，伪元素）

类型选择器
/* 会选择内部所有div元素 */
div {
     color : red;
}
通用选择器
/* 会选择内部所有元素 ，能不用就不用，效率低下*/
* {
     color : red;
}
id选择器
/* 会特定元素增加样式*/
#one {
     color : red;
}
<p id = "one">这是p1</p>

id注意点：

  • id在当前HTML中唯一。
  • 多个单词的时候，用中划线/下划线/驼峰 保证可读性 main-title /main_title/ mainTitle
class选择器

会特定多个元素增加样式，class命名可以重复 ,class包含

.one {
     color : red;
}
<p class = "one">这是p1</p> /* 会变*/
<p class = "one two">这是p1</p> /* 会变*/
<p class = "two">这是p1</p> /* 不会变*/

id注意点：

  • 一个元素可以有多个class，用空格隔开。
  • 多个单词的时候，用中划线/下划线/驼峰 保证可读性 main-title /main_title/ mainTitle
  • 保证了样式与结构分离
  • 能够统一修改局部的某一类的元素，不影响其他
属性选择器

改变拥有该属性的元素 [att = value],跟#选择器有些类似

/* href属性中包含one */
[href ~= "one"]{
     color : green;
}
/* href属性one开头的元素 并且是整个元素 */
[href |= "one"]{
     color : green;
}
/* href属性one开头的元素 */
[href ^= "one"]{
     color : green;
}
/* href属性one结尾的元素 */
[href $= "one"]{
     color : green;
}
/* href属性包含one的元素 */
[href *= "one"]{
     color : green;
}

<p href = "one">这是p1</p> /* 会变*/
<p href = "two">这是p1</p> /* 会变*/
<p href = "one two">这是p1</p> /* 会变*/
<p href = "one-other">这是p1</p>

后代（组合）选择器

1.组合选择器 可以找到父元素包含内的子元素
2.子组合选择器 直接嵌套子元素，不包含间接嵌套
3.不止可以放元素，也可以放class选择器 ，类型选择器

1. div span{
     color : red;
}
<div><span>hahaa</span></div>  /* 会变*/
<span>hahaa</span>  /* 不会变*/
<p><span>hahaa</span></p>  /* 不会变*/
<div><p><span>hahaa</span></p></div>  /* 会变*/

/* 子组合选择器 直接嵌套子元素，不包含间接嵌套*/
2. div>span {
color : green;
}
<div><span>hahaa</span></div>  /* 会变 */
<div><p><span>hahaa</span></p></div>  /* 不会变 */

3. .name span [title] {
    color : green;
}
<div class = "name"><span><div title = "one">呵呵呵</div></span></div>  /* 会变 */

相邻(兄弟)选择器

（+）div元素后面紧挨着的P元素（且div p元素必须是兄弟关系）
（~）div元素后面所有的P元素（且div p元素必须是兄弟关系）

div+p{
     color : red;
}
<div>这是div</div>
<p>这是p1</p> /* 会变*/
<p>这是p2</p> /* 不会变*/
----------------------------------
div~p{
     color : red;
}
<div>这是div</div>
<p>这是p1</p> /* 会变*/
<p>这是p2</p> /* 会变*/

交集选择器

需要同时满足两种情况的元素

div.one[title = "test"]{
     color : red;
}
<div class = "one">这是div</div>  /* 不会变*/
<div class = "one" title = "test">这是div</div> /* 会变*/
<div class = "one" title = "other">这是div</div> /* 不会变*/
----------------------------------
div~p{
     color : red;
}
<div>这是div</div>
<p>这是p1</p> /* 会变*/
<p>这是p2</p> /* 会变*/

并集选择器

需要满足任何一种情况的元素,逗号隔开

div, .one, [title = "test"]{
     color : red;
}
<div class = "one">这是div</div>  /* 会变*/
<div class = "one" title = "test">这是div</div> /* 会变*/
<div class = "one" title = "other">这是div</div> /* 会变*/
----------------------------------
div~p{
     color : red;
}
<div>这是div</div>
<p>这是p1</p> /* 会变*/
<p>这是p2</p> /* 会变*/

伪类选择器

动态伪类选择器

  • a:link 未访问的链接
  • a:visited 已访问的链接
  • a:hover 鼠标移动到链接上
  • a:active 激活的链接（鼠标在连接上长按未松开）
 <style>
        /*未访问的链接*/
        a:link {
            color: orange;
        }
         /*已访问的链接*/
        a:visited {
            color: green;
        }
        /*鼠标移动到链接*/
        a:hover {
            color: aquamarine;
        }
        /*被激活的链接，鼠标点击不放*/
        a:active {
            color: red;
        }
</style>
····
<a href="http://www.12306.cn/mormhweb/">百度一下</a>

注意点

  1. 除了a元素，hover跟active可以用于其他元素。
  2. :hover必须放在:link跟:visited后面才能完全生效
  3. : active必须放在hover后面
动态伪类：focus 文本框聚焦属性

获取焦点，当前有输入焦点的元素

动态伪类：tabindex 选中索引

tab键盘选中的索引值，从1开始，依次选中。
-1表示禁止tab键盘选中

结构伪类：nth-child() 父元素中的第多少个子元素，

nth-child(1)
nth-child(2n),3n...nn,表示整倍数，
nth-child(2n+1)
nth-child(an+b) (n可以从0开始,a,b是可以是0 正数，负数)
nth-child(-n +2) 可以表示前两个元素，n从0开始，-n+2只能是1，2，负数会导致失效

nth-last-child(-n +2) ，从后面开始数第几个元素跟nth-child位置相反
first-child 等价于 nth-child（1）
last-child 等价于 nth-last--child（1）
first-of-type 等价于 nth-of-type(1)
only-child 等价于 父元素中只有一个子元素
:root 根元素
:empty 代表里面完全空白的元素(空格也没有)

<style>
      /*表示父元素的第一个子元素是span*/
        span:nth-child(1) {
            color: #f00;
        }
    </style>
<body>

<span>span1</span> /*变色*/
<div>
    <span>span2</span>/*变色*/
    <span>span3</span>
    <span>span4</span>
    <span>span5</span>
    <p>
        <span>span6</span>/*变色*/
    </p>
</div>
</body>

结构伪类：父元素中 nth-of-type(n)第多少个子元素。

nth-of-type(n)

<style>
        span:nth-of-type(2) {
            color: #f00;
        }
    </style>
<body>
<span>span1</span>
<div>
    <span>span2</span>
    <span>span3</span> /*变色*/
    <p>
        <span>span6</span>
    </p>
</div>
<span>span1</span> /*变色*/
</body>

否定伪类：:not(x) x是一个选择器，表示除了x以外的所有样式

<style>
        div:not(#text) {
            color: #f00;
        }
    </style>
<body>
<div>asdasd</div> /*变色*/
<div id="text">asdasd</div>
<div>asdasd</div> /*变色*/
<span>span</span> /*变色*/
</body>

伪元素 建议使用双冒号来区分元素

:first-line 或者 ::first-line 可以针对首行设置元素样式

<style>
        div {
            width: 300px;
            background: #f00;
        }
        div::first-line {
            color: #00f;
        }
</style>

:first-letter 或者 ::first-letter 针对元素首字母来设置样式
:before 或者 ::before 在内容前面插入样式
:after 或者 ::after 在内容后面插入样式

  • 特点： 跟div不链接在一起，可以单独设置样式
<style>
        div {
            width: 300px;
            background: #f00;
        }
        div::before {
            content: "555";
        }
        div::after {
            content: '777';
        }
      div::after {
             /* 引用图片 */
             content:url("images/1.png");
        }
       div::after {
             /* 引用属性名的值 ,会将one放置div之前*/
             content:attr(class);
        }
    </style>
<body>
<div>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</div>
<div>div2</div>
<div class = "one">div3</div>
</body>

Emmet 插件的使用

  • 标签的使用
  1. div>ul>li
<div>
    <ul>
        <li></li>
    </ul>
</div>
  1. div+p+span
<div></div>
<p></p>
<span></span>
  1. div+div>p>span+em
<div></div>
<div>
   <p>
    <span></span>
    <em></em>
   </p>
</div>
  1. ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
  1. div+div>p>span+em^h1 ^表示跟em的父元素同级，^^表示跟em的父元素的父元素同级，最多不能超过当前的第一个元素
<div></div>
<div>
    <p><span></span><em></em></p>
    <h1></h1>
</div>
  1. 小括号的用法 div+(div>em>span)+p
<div></div>
<div>
    <em>
        <span></span>
    </em>
</div>
<p>
</p>
  • 属性用法
div#header+div.page+div#footer.class1.class2.class3
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
-----------------
td[title="hello world" cosplay=3]
<td title="hello world" cosplay="3"></td>
-----------------
ul>li.item$*3
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>
-----------------
ul>li.item$@-*3
<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>
  • 内容用法
a{click}>span{here}
<a href="">click<span>here</span></a>
-----------------
p>{click}+a{here}+{to contune}
<p>click<a href="">here</a>to contune</p>
-----------------
/*隐式标签*/
<div>.wrap>.content</div>  
<div>
   <div class="wrap">
       <div class="content"></div>
   </div>
</div>
-----------------
/*隐式标签*/
table>#row$@4*3>[colspan=2]>{$}
<table>
   <tr id="row4">
       <td colspan="2">1</td>
   </tr>
   <tr id="row5">
       <td colspan="2">2</td>
   </tr>
   <tr id="row6">
       <td colspan="2">3</td>
   </tr>
</table>
-----------------
  • CSS用法
w200+h100+m40
<style>
        div {
            width: 200px;
            height: 100px;
            margin: 40px;
        }

    </style>
-----------------
<style>
        div {
            /* m20-30-40-50 */
            margin: 20px 30px 40px 50px;
            /*fz50p*/
            font-size: 50%;
        }
 </style>-
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,122评论 6赞 505
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,070评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,491评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,636评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,676评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,541评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,292评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,211评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,655评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,846评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,965评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,684评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,295评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,894评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,012评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,126评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,914评论 2赞 355

推荐阅读更多精彩内容