css介绍及字体样式-优快云博客

本文链接：https://blog.youkuaiyun.com/Thefallscold/article/details/149600843

介绍

CSS是Cascading Style Sheets的英文缩写,即层叠样式表
Html【Hyper Text Markup Language】
CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
CSS是用于布局与美化网页的
CSS能实现内容与样式的分离，方便团队开发
CSS是由W3C的CSS工作组产生和维护的
- 1996年W3C正式推出了CSS1
- 1998年W3C正式推出了CSS2
- 2007年W3C正式推出了CSS2.1
- 2011年W3C正式推出了CSS3,目前仍在持续完善中

CSS语法

CSS 由选择器、属性、属性值组成

选择器{ 样式属性名1：样式属性值1; 样式属性名2：样式属性值2; ..... }

选择器通常是指需要改变样式的 HTML 元素属性是指希望设置的样式属性属性和值之间用冒分开，多个属性之间加分号隔开 CSS是大小写不敏感的,在CSS语法中推荐使用小写

如：body{color:red；font-size:20px}
<!--   设置了页面为字体颜色为红色，字体大小为20像素 -->

CSS注释

CSS里面的注释使用C语言编程中一样的约定方法去指定，注释的内容会被浏览器忽略，可用于为样式表加注释及调试使用。 CSS注释格式如下：

div{
    /* 设置宽度为200px */
    width:200px;
}

css中的颜色值

十六进制表示方式 #rrggbb

如:#ffcc00 十六进制 0-F

简单十六进制表示方式；#rgb

如:#fc0

rgba表示方式； rgba(x,x,x,a) 其中x是一个0-255的整数值

如:rgb(255,204,0,)

百分比实现rgb形式；rgb(x%,x%,x%) 其中x是一个0-100的整数值

如rgb(100%,80%,0%)

颜色英文单词表示方式如:red

CSS长度单位

相对长度单位：
- px 像素（Pixel）
- % 百分比
- em : Element meter 根据文档字体计算尺寸
- rem :Root element meter 根据根文档（ body/html ）字体计算尺寸
- ex : 文档字符“x”的高度
- ch : 文档数字“0”的的宽度
- vh : View height 可视范围高度
- vw : View width 可视范围宽度
绝对长度单位： in英寸（Inch） pt 点（Point） cm 厘米（Centimeter） mm 毫米（Millimeter）换算比例：1in = 2.54cm = 25.4 mm = 72pt
calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度 calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-“, “ *”, “/” 运算； calc()函数使用标准的数学运算优先级规则； calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小 calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度 calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-“, “ *”, “/” 运算； calc()函数使用标准的数学运算优先级规则； calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小 calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

案例：使用calc实现左侧固定，右侧自适应效果

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    overflow: hidden;
    background-color: antiquewhite;
  }
  .left{
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
  }
  .right{
    width: calc(100% - 200px);
    height: 300px;
    background-color: green;
    float: left;
  }
</style>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

html引入CSS的三种方法

引入方式

行内样式（内联样式）
内部样式（内嵌样式）
外部样式

行内样式（内联样式）

<h1 style="color:red">这是⾏内样式的使⽤⽅式</h1>

内嵌样式

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .text{
                color:red;
            }
        </style>
    </head>
    <body>
        <h1 class="text">这是内部样式引⼊⽅式</h1>
    </body>
</html>

外部样式

通过 link 标签引⼊

<link rel="stylesheet" href="url"/>

其中 href 属性是外部样式表⽂件的URL

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="./index.css">
    </head>
    <body>
        <h1 class="text">外部样式</h1>
    </body> 
</html>

通过@import引入

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
          @import url('../css/demo.css');
        </style>
    </head>
    <body>
        <h1 class="text">外部样式</h1>
    </body> 
</html>

或者在css文件中引入

@import url('../css/demo.css');
div{
  color:red;
}

注意：@import必须在css样式的第一行进行引入，否则不生效

选择器

css 选择器⽤于选择你想要的元素的样式的模式要使⽤css对HTML⻚⾯中的元素实现⼀对⼀，⼀对多或者多对⼀的控制，这就需要⽤到CSS选择器 HTML⻚⾯中的元素就是通过CSS选择器进⾏控制的

标签选择器

选择器名称为html标签名称

p  { text-indent:3em; }  /
*当中的选择器是p*
/
h1{ color:red; }  /*当中的选择符h1*/

类选择器

选择器名称以 . 开始，后面再加上对应元素class属性值

<style>
  .dark-row{ background-color:#EAEAEA; }
</style>
<p class="dark-row">第一段</p>

ID选择器

选择器名称以#开始，后面再加上对应元素的id属性值将对应元素的id属性值设为id选择器名称

<style> #main{ text-indent:3em; } /*ID名称main前加上一个#号*/ </style> 
<p id="main">文本缩进3em</p>

通配所有元素

*{font-size:12px;color:#888}

分组选择器

h1, h2, p { text-align: center; color: red; }

选择器的优先级

ID选择器 >类选择器>标签选择器>通配符选择器

派生选择器

后代选择器: 以空格分隔
子元素选择器: 以>分隔
相邻兄弟选择器:以+分隔
普通兄弟选择器:以~分隔

<style>
/*相邻兄弟选择器
选中和第一个元素相邻的第二个元素*/
p + b {
     color: red;
}
/*普通兄弟选择器
匹配和第一个元素后面的所有同级元素；*/
p ~ b {
    color: blue;
}
</style>
<ul class="wrapper">
   <li>1
       <b>这是粗体123</b>
       <p>这是一段段落</p>
       <span>12344555656</span>
       <b>这是粗体</b>
       <p>这是一段段落2</p>
   </li>
   <li>2
        <p>这是一段段落</p>
        <b>这是粗体</b>
        <b>这是粗体2</b>
    </li>
    <li>3</li>
</ul>

选择器的权重

权值等级划分，一般来说是划分4个等级：

类型	权重
内联样式	如: style=" "，权值为1000
ID选择器	如：#name，权值为100
class类选择器，伪类和属性选择器	如.name，权值为10
标签选择器和伪元素选择器	如div p，权值为1
通用选择器（）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、继承通用选择器（）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、继承	如，权值为0000如，权值为0000

计算规则

css选择器表达式	特指度计算结果
p	1
p.large	11
p#large	101
div p#large	102
div p#large ul.list	113
div p#large ul.li.list li	114

最⾼权重

!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。当 !important 规则被应⽤在⼀个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，⽆论它处在声明列表中的哪个位置。

css选择规则的权值不同时，权值高的选择器优先
css选择规则的权值相同时，后定义的选择器规则优先
css属性后面加 !important 时，无条件绝对优先

总体来说： !important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器注意：减少选择器的个数：“在css规则中尽可能的使用较少的选择器”。

css三⼤特性

层叠性

所谓层叠性是指多种CSS样式的叠加
层叠性是浏览器处理冲突的⼀个能⼒,如果⼀个属性通过两个相同选择器设置到同⼀个元素上，那么这个时候⼀个属性就会将另⼀个属性层叠掉（覆盖）
样式不冲突，不会层叠
样式冲突；就会层叠；按照优先级，决定哪个样式⽣效

继承性

CSS 的继承特性指的是应⽤在⼀个标签上的⼀些 CSS 属性被传到其⼦标签上；就是被⼦标签继承
不是所有的样式都会被⼦标签继承，字体类font- ; ⽂本类 text- ；颜⾊color ；⾏⾼line-height 等可以被继承
a标签⽐较特殊，没有办法通过继承改变a标签的字体颜⾊，只能直接给a标签设置颜色

优先级

权重的优先级，决定哪个样式最终⽣效
权重相同：后者⽣效；权重不同：权重⾼者⽣效

字体样式

CSS字体

font-style 设置字体样式

normal：指定⽂本字体样式为正常的字体
italic：指定⽂本字体样式为斜体。

.normal {
    font-style:normal
}
.italic {
    font-style:italic
}

文本字体

font-family 属性设置⽂本的字体 font-family 属性应该设置⼏个字体名称作为⼀种"后备"机制，如果浏览器不⽀持第⼀种字体，他将尝试下⼀种字体

p {
    font-family:"Times New Roman", Times, serif;
}

字体粗细

font-weight：定义字体粗细

normal：正常的字体。相当于number为400
bold：粗体。相当于number为700
bolder：特粗体。也相当于strong和b标签的作⽤
lighter：细体
：⽤数字表示⽂本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

p.normal {
    font-weight: normal;
}
p.thick {
    font-weight: bold;
}
p.thicker {
    font-weight: 900;
}

字体⼤⼩

font-size：定义字体⼤⼩

把字体的尺⼨设置为不同的尺⼨。可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large
相对于⽗对像中字体尺⼨进⾏相对调节。使⽤成⽐例的em单位计算。可选参数值：smaller | larger
⽤数值指定⽂字⼤⼩。不允许负值
⽤百分⽐指定⽂字⼤⼩。其百分⽐取值是基于⽗对象中字体的尺⼨。不允许负值

/* 设定段落⽂字⼤⼩为⾮常⼤ */
p { font-size: xx-large }
/* 设定⼀级标题的⽂字⼤⼩为2.5倍⼤⼩ */
h1 { font-size: 250% }
/* 设定span⾥的⽂字⼤⼩为16px */ 
span { font-size: 16px; } 
.larger { font-size: larger; }
.point { font-size: 24em; } 
.percent { font-size: 200%;}

字体行高

line-height：设置行高

normal：默认值。
：⽤⻓度值指定⾏⾼。可以为负值。
：⽤百分⽐指定⾏⾼，其百分⽐取值是基于字体的⾼度尺⼨。可以为负值。
：设置数字，此数字是当前的字体⼤⼩的倍数。

p {
    line-height: normal;
}
p {
    line-height: 35px;
}
p {
    line-height: 3em;
}
p {
    line-height: 34%;
}

综合设置

CSS字体属性font定义字体，加粗，⼤⼩，⽂字样式。该属性是复合属性

font：<font-style> <font-weight> <font-size>/<line-height> <fon-family>
p {
    font:20px/1.5 '微软雅⿊'
}
p {
    font:bold 20px/30px '微软雅⿊'
}

引入外部字体

为了避免用户字体缺省，需要在服务器端设置好页面的字体样式，让网页以最佳方式进行展示直接将下载好的字体复制到当前文件夹下（网站下载新字体）想要使用外部字体，需要进行引入

<style type="text/css">
/* 第一步： 声明一个字体 */
@font-face {
    font-family: my-font;/*自定义名称*/
    src: url('时尚中黑简体.ttf');
}
@font-face {
    font-family: my-font2;
    src: url('迷你简双线体.ttf');
}
/* 第二步： 使用字体 */
p {
    font:50px my-font,sans-serif;
}
div {
    font:50px my-font2,sans-serif;
}
</style>
<p>
  这是一个段落标签
</p>