资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端笔记之CSS（上）

前端笔记之CSS（上）

番茄西红柿 / 1052人阅读

摘要：宋体注意使用某种特定的字体系列宋体完全取决于用户机器上该字体系列是否可用这个属性没有指示任何字体下载。但是记住，最终选择上的是最后的那个后代元素。

 

 

 

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

基本语法

在head标签里面，写入一下标签：　　

<html>
    <head>
        <style type="text/css">
             css代码
        style>
    head>
    <body>body>
html>

 

CSS 代码规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器{属性:属性值;属性:属性值;···},我们称这种形式叫做键(key)值(value)对形式。

 

 

注释：

/*css注释内容*/

文本属性

文本属性

文本属性值

意义

color

英文,16进制,rgb

文本颜色

text-align

left,center,right

对齐元素中的文本

text-indent

px,em

缩进元素中文本的首行

line-height

px

设置行高

font-size

px

字体大小

font-weight

100-900,bold,normal,lighter

文本的粗细

font-style

normal,italic,oblique,inherit

字体的风格。

font-family

字体

字体

文本属性之color：

color 属性规定文本的颜色。

①英文字母：red,green,blue,yellow,orange,pink,gray···

②16进制：

③rgb：r-red,g-green,b-blue

16进制和rgb我们不需要记忆会通过ps或者识色工具取色就可以了。

 

文本属性之text-align：

text-align 属性规定元素中的文本的水平对齐方式。

实现text-align属性特效元素必须具备宽度。

最后一个水平对齐属性是 justify，它会带来自己的一些问题。慎重使用。

 

文本属性之font-weight：

font-weight 属性设置文本的粗细。

文本属性之font-style：

 

 

文本属性之font-family：

c盘->windows->fonts文件夹

 

font-family 规定元素的字体系列。

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

有两种类型的字体系列名称：

指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。

通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。

注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

 

 

 

 复合属性

可以按顺序设置如下属性：

font-style （使用斜体、倾斜或正常字体）

font-variant （设置小型大写字母的字体显示文本）

font-weight （设置文本的粗细）

font-size/line-height （设置字体的尺寸和行高）

font-family （规定元素的字体系列）

可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。

如：

body{ font: italic small-caps bold 14px/24px "microsoft yahei";}

字体：斜体 小型大写字母 粗体 14号大小/24像素行高 微软雅黑

可以不需要每个都写，但是顺序还是要的

 

块元素和行内元素

标签 元素 标记都是一回事。

 

块元素

行内元素

行内块元素

标签

div h1-h6 ul ol p

span a b i

img 

特性

①多带带占用一整行

①不多带带占用一整行

①不占用一整行

默认宽度100%

②可以设置宽高

②不可以设置宽高

②可以设置宽高

 

 

相互转换

使用以下CSS属性可以将任意的标签元素（块级、行内、行内块）转换为任何的显示模式。

 display:block;        转换为块级元素

 display:inline;       转换为行内元素

 display:inline-block; 转换为行内块元素

display的特殊值

隐藏显示元素

 display:none;->display:block/inline/inlin-block;

 

 visibility: hidden;->visible

二者区别：

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。(后面我们阐述)

 

基础选择器

标签选择器

标签选择器是标签名称命名的，让页面中所有的指定标签都具备一个样式，不管有多少个，不管嵌套多深，一定会被选中。

标签名{属性名:属性值;}

h2{color:red;}

 

<div>
    文字1
    <div>
        文字2
        <div>
            文字3
            <div>
                文字4
                <h2>h2标签h2>
            div>
        div>
        div>
div>

因为标签选择器会选中所有的标签，实际工作中，不会多带带用标签选择器，因为会影响其他同名的标签。

类选择器（class）

使用方法：

1、用“.”来定义类选择器

2、在需要调用的标签上添加class属性即可（class="类选择器名称"）

 

示例：

定义：.box{color:red;}

调用：

class="box">div3

一个标签可以添加多个类选择器，用空格隔开。

正确写法：

 

用原子类最方便的，所谓的原子类，就是一些简单的属性做成一个类，然后执行选择所需的样式即可。

各取所需：

 div1

 

类选择器是工作中最常用的，原因：

 1、页面上可以有无数个标签，用一样的类样式

 2、一个标签可以同时使用多个类样式

 

 id选择器:

要求以“#”开头，后面紧跟id选择器的名字，名称自定义，要遵循命名规范

 #id名称{color:red;}

 

实例：

 定义：#box{}

 调用：div1

id选择器好比人的身份证，同一个id名，只能使用一次，不能重复。

实际工作中写CSS，id选择器是个不太常用的选择器，因为：

 1、id太珍贵，一次只能给一个元素添加样式

 2、写样式的时候，大部分可以用类选择器，极少用id，而且id选择器权重太高

 3、JavaScript通过id来获取元素

总结：id选择器其实是留给JS用的。

通配符选择器（*）

“*”指的是所有。

作用：选中网页所有的标签。

经验：由于通配符选择器可以选中所有标签，权重最低，工作中不使用，一般用来做测试，写demo。

 *{color:red;}  代表当前网页中所有标签都变红

 

优先级关系

权重： id选择器>class选择器>标签选择器>通配符选择器 　　

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        *{
            color:red;
        }
        h1{
            color: green;
        }
        #h1{
            color: orange;
        }
        .h1{
            color: blue;
        }
        /* 
        
        id选择器>class选择器>标签选择器>通配符选择器
        
         */
    style>
head>
<body>
    <h1 id="h1" class="h1">基本选择器的优先级关系h1>
body>
html>

高级（复合）选择器

描述：前面学习的都是基础选择器，复合选择器就是将基础选择器综合在一起使用。

并集选择器：

作用：将页面中相同样式放到一起写CSS属性，集体声明样式，简化代码。

逗号“，”表示合并关系

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        h1,h2,h3,.box,p,span,li{
            color:red;
            font-size:30px;
        }
    style>
head>
<body>
    <h1>文字1h1>
    <h2>文字2h2>
    <h3>文字3h3>
    <div class="box">div标签div>
    <p>p标签p>
    <span>span标签span>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
    ul>
body>
html>

交集选择器：

有些教材称为“指定选择器”

即满足条件1，也要满足条件2

两种或以上选择器同时存在一个标签上。

写法：选择器之间直接连接，没有任何符号

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        p.red{color:red;}
        #box.box{
            color:blue;
        }
    style>
head>
<body>
    <p class="red">p1p>
    <p class="red">p2p>
    <p>p3p>
    <div class="red">div1div>
    <div class="box" id="box">div2div>
    <div class="box">div3div>
    <div class="box" id="box">div4div>
body>
html>

交集选择器使用的是基础选择器，可以是都是类选择器，也可以是标签和类混写，也可以是id。

 

后代选择器：

有些教材称为“包含选择器”，“派生选择器”

描述：后代选择器用来选择元素的后代，用“空格”隔开。当标签发生嵌套时，就存在后代关系。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Documenttitle>
    <style type="text/css">
       div p{color:red;}
       .box1 p{color:blue;font-weight:bold;}
       .bigBox ul li a{color:red;}
      .father .son{color:red;}
    style>
head>
<body>
    <p>外面的p标签p>
    <div class="box1">
        <p>p1p>
        <p>p2p>
        <p>p3p>
    div>

    <div class="box2">
        <p>p1p>
        <p>p2p>
        <p>p3p>
    div>

    <div class="bigBox">
        <ul>
            <li><a href="##">li01a>li>
            <li><a href="##">li02a>li>
            <li><a href="##">li03a>li>
            <li><a href="##">li04a>li>
        ul>
    div>

    <div class="father">
        <a href="##" class="son">文字1a>
    div>
    <div class="father">
        <a href="##">文字2a>
    div>
body>
html>

注意：后代选择器，选择的是后代的元素，不一定是儿子，还是孙子、曾孙子、重孙子...都行。但是记住，最终选择上的是最后的那个后代元素。

 

CSS引入方式

内嵌式：

内嵌式优点：加载速度快，因为不用再多一个HTTP请求，结构和样式半分离。

将CSS嵌入到HTML页面head标签对中：

 

 

行内式：

写法：在标签身上添加style属性

 

div1

注意：行内式没有实现结构和样式分离，不推荐使用，一般后台程序员比较习惯使用这种方式。

 

外链式：

1、新建一个.css扩展名的文件，直接在文件内部写CSS（注意：不要写上

 

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。

 

引入方式总结

 

 

CSS属性

字体

font-style:

font-style 属性可定义字体的风格。该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个多带带的字体。

 

p{
    font-style: normal;
    font-style: italic;
    font-style: oblique;
}

font-weight:

font-weight 属性设置文本的粗细。该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，700 等价于 bold。

 

p{ 
    font-weight: 100;/*lighter*/
    font-weight: 400;/*normal*/
    font-weight: 700;/*bold*/
 }

font-size:

font-size 属性可设置字体的尺寸。该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

 

我们通常使用如下代码：

 p{

     font-size: 15px;

 }

 

注意：在PC端默认字体大小是16px,最小字体大小是12px.

 

 font-family:

font-family 属性是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

注释：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。

 

font-family: 我想要的1,我想要的2,我想要的3,···保底字体。

那么我们电脑中的字体在哪里？

C:WindowsFonts

 

 

注意：①我们多写几个字体 作为备用字体②注意版权问题(微软雅黑收费了)③我们建议把中文字体改写为unicode编码

 

 

复合属性font：

上述单一属性我们可以通过font这个复合属性一起写出来：

语法：

  font-style，font-variant ， font-weight，font-size/line-height，font-family

上述属性值不一定都要写，但是如何你要写必须按

GPU云服务器 云服务器 前端css css前端 前端css框架 浮动-前端-css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1100.html

相关文章

  • 前端小白进阶笔记之多级菜单分享

    摘要：注释部分为下拉菜单隐藏，显示的样式。子元素会继承父元素的样式在写样式是我们会发现子元素会继承父元素的样式，如果想要改变样式，可以给要改变样式的对象一个或者单独设置其属性相对定位绝对定位的用法。 css技术分享之二级、三级下拉菜单的制作： 首先看一下网页中的三级下拉菜单： showImg(https://segmentfault.com/img/remote/14600000113377...

    Wuv1Up 评论0 收藏0

  • 前端小白进阶笔记之多级菜单分享

    摘要：注释部分为下拉菜单隐藏，显示的样式。子元素会继承父元素的样式在写样式是我们会发现子元素会继承父元素的样式，如果想要改变样式，可以给要改变样式的对象一个或者单独设置其属性相对定位绝对定位的用法。 css技术分享之二级、三级下拉菜单的制作： 首先看一下网页中的三级下拉菜单： showImg(https://segmentfault.com/img/remote/14600000113377...

    Mike617 评论0 收藏0

  • 前端笔记之HTML

    摘要：前端三层内容层结构层样式层表现层行为层层语言含义结构层由或之类的标记语言负责创建。行为层负责回答内容应该如何对事件做出反应这一问题。这是语言和主宰的领域。前端三层：内容层(结构层)HTML、样式层(表现层)CSS、行为层JavaScript层语言含义结构层HTML由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标...

    番茄西红柿 评论0 收藏0

  • CSS学习笔记(十六) CSS最佳实践之可维护性篇

    摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。 前言 CSS代码难维护众所皆知。 为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现； 作用于某个元素上的样式又可能来自单个样式规...

    newtrek 评论0 收藏0

  • CSS学习笔记(十六) CSS最佳实践之可维护性篇

    摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。 前言 CSS代码难维护众所皆知。 为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现； 作用于某个元素上的样式又可能来自单个样式规...

    keke 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<