美文网首页
CSS 基础知识 初识

CSS 基础知识 初识

作者: 咖啡豆8888 | 来源:发表于2018-10-10 09:44 被阅读8次

    什么是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>-

    相关文章

      网友评论

          本文标题：CSS 基础知识 初识

          本文链接：https://www.haomeiwen.com/subject/nbongftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|CSS 基础知识 初识|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！