CSS笔记之初始篇

前言

同上篇HTML学习,CSS作为美化网页的外形担当,可以把网页从课本样的枯燥文字变成绘本样多彩。

软件

  • 记事本
  • Chrome浏览器

编写方式

修改后缀名为css

基础框架

CSS并不需要声明,最基本的格式如下

选择器{属性:值;}

意为把这个元素的这个属性设置为这个值

例如:

p{color:red;}

把元素p的字体颜色设置为红色

基础特性

  • 样式继承,子元素继承父元素的样式
  • 后设置的样式特性优先
  • 跨浏览器兼容,写入HTML文件head中,需配合js文件

    <!--[if It IE 9]>
        <script src="js/html5.js">
        <script src="js/css3-mediaqueries.js">
    <![endif]-->

引入方式

  • 直接写入标签(行内样式)

HTML文件

<p style="color:red;">HHHH</p>
  • 直接写入head元素(内部样式)

HTML文件

<head>
    ...
    <style type="text/css"><!--p{color:red;}--!></style>
</head>

<body>
    <p>
        HHHHHHH
    </p>
</body>
  • CSS文件附在外部(外部样式)

作为最常用的方式,外部样式具有方便管理的优势

HTML文件

<head>
    ...
    <link rel="stylesheet" href="css/common.css">
</head>

<body>
    <p>
        HHHHHHHH
    </p>
</body>

CSS文件

@charset "UTF-8";
p{color:red;}
 <link rel="stylesheet" href="css/common.css">

rel="stylesheet"表示附上与此处相关联的样式表

href="css/common.css"表示该样式表参考CSS文件夹中common.css文件

美化字体

可以使用在线字体 ,站点服务器迁移也比较方便。

比如使用Googlefonts的Montserrat

HTML文件

<head>
    ...
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

CSS文件

header nav ul li a
{
    color:#FFF;
    background-color: blue;
    font-family: "Montserrat",sans-serif;
    font-size: 20px;
    padding: 0 40%;
}

其中,font-family: "Montserrat",sans-serif;是指定字体,如果无法读取Montserrat就使用sans-serif字体。

改变字体大小和颜色

字体大小

CSS文件

header nav ul li a
{
    color:#FFF;
    background-color: blue;
    font-family: "Montserrat";
    font-size: 20px;
    padding: 0 40%;
}

其中,font-size: 20px;就是修改字体大小。px是单位,一般有以下几个

px显示器一个像素的长度为1的单位div{width:100px;}
%相对于父元素初值的百分比div{width:80%;}
em默认字号设为1的倍率div{width:3em;}

字体颜色

以上,color:#FFF;即为字体颜色为黑

同样,我们可以用red,green,blue等等来表示

另外,我们可以用RGB来准确表现颜色,一般使用16进制

进制RedGreenBlue
10进制20400
16进制CC0000

如果用10进制表示color:rgb(204,0,0);

同样,如上,RGB每个值两位相同可简写为color:#C00;

优先级

不同的选择器对应着不同的强度,高优先级的样式会被优先采用

同优先级则采用后者

选择器种类(由强到弱)一般用法
!importantcss.webtest{color : red !important;}
内联(行内)样式html<span style = "color:red;">HHH</span>
id选择器html<span id = "webtest">HHH</span>
css#webtest{color:bule;}
类选择器、属性选择器、伪类类选择器
html<span class = "webtest">HHH</span>
css.webtest{color:red;}
属性选择器
html<p><a href = "https://fanxvan.top" target="_self">Mr.FX的博客</a></p>
cssa[href* = "top"]{color:red;}
伪类
cssa:hover{color:red;}
元素选择器,伪元素元素选择器
HTML<span>HHH</span>
cssspan{color:red;}
伪元素
HTML<p>HHH</p>
css<p::after{content:"(AAA)"}
通配选择器css*{margin:0;padding:0;}

!important尽量少用

内联(行内)样式,即写入HTML文件的style属性的方式

id选择器,标志为#符号

类选择器,标志为.符号,在HTML文件中需要标注class值

属性选择器,标志为*符号,如上,href的属性值中有top的元素的文字变为红色

伪类,链接的不同状态都可以以不同的方式显示,如上,光标放在链接上的文字颜色为红色

元素选择器,通过元素种类设置样式

伪元素,标志为::符号,如上,以上输出为HHHAAA

通配选择器,标志为*{},可以影响整个页面

特指度

特指度是指不同样式的权重,权重高的优先应用,相同的应用后者

选择器种类特指度
!important无特指度,但具有最高优先级
内联(行内)样式1000
id选择器0100
类选择器、属性选择器、伪类0010
元素选择器,伪元素0001
通配选择器0000

例如

选择器特指度
p0001
.class0010
.class1 .class20020
p .class0011
p .class::after0012
#id0100
#id p0101

该例子最高特指度为#id p

也可以通过 Specificity Calculator网站查询

内边距和外边距

有很多时候元素之间会设置一定空白,让页面变得好看一些。

这里使用两个函数paddingmargin

功能说明
padding边内侧空白(内边距)
margin边外侧空白(外边距)

这里涉及到一个CSS的框模型,网页中的图片和文字由三层包围

框模型

padding部分可以涂上背景色,而margin不能涂上背景色

padding为例

属性含义
padding:10px;上下左右各10px
padding:10px 20px;上下10px 左右20px
padding:10px 20px 30px;上10px 左右20px 下30px
padding:10px 20px 30px 40px;上10px 右20px 下30px 左40px
padding-top:10px;上10px
padding-bottom:10px;下10px
padding-left:10px;左10px
padding-right:10px;右10px

在元素纵向排列时,相邻部分margin会重叠而非相加

浮动

float函数可以让元素向左或向右靠拢,让竖着的HTML元素横过来

属性含义
float:left向左浮动
float:right向右浮动
float:none无浮动

对于一些不需要跟随浮动的元素,就需要clear属性

属性含义
clear:left在左侧不允许浮动元素
clear:right在右侧不允许浮动元素
clear:both在左右两侧均不允许浮动元素
clear:none默认值,允许浮动元素出现在两侧
clear:inherit规定应该从父元素继承 clear 属性的值

适配手机

适配手机的响应式web设计,能减少HTML文件,统一URL,但也会降低页面布局的自由度,一般在CSS文档末尾加上

/* ----------------------
  屏幕宽度在599px以下时使用(用于智能手机)
 ---------------------- */
@media screen and (max-width: 599px) {
    .col {
        float: none; /*** 解除float浮动,排成一纵列 ***/
        margin-left: 0; /*** 左外边距设为0 ***/
        width: auto; /*** 宽度填满(重置百分比%) ***/
    }
    .row {
        padding: 0 8px; /*** 设置左右各8px的内边距 ***/
    }
}

乱码

一般使用浏览器发生乱码的网页

需要检查HTML文件的head指定的字符编码规则

HTML文件的字符编码规则是否一致

一般使用UTF-8

Last modification:February 7th, 2021 at 12:28 am