CSS基础语法

2024-02-23 21:57:52

CSS基础语法

keywords：CSS;层叠样式表;页面;

上下文

CSS简介：

CSS 指层叠样式表 (Cascading Style Sheets)，用于设置html页面的文本属性、图片属性及版式布局，包括颜色（color）、大小（font-size）、边距、高度（height）、边框等；
CSS之的初代贡献者：Håkon Wium Lie

CSS文档

CSS文档仅用于存放网页样式表，是以.css为后缀的文件；

CSS基础语法

前述：该部分主要介绍一些常用的CSS样式、选择器及其使用方法

1.CSS基本使用

1)CSS样式规则：

2)CSS注释：/*注释内容*/

3)引入html页面的方式：

方式一：页面内部样式表，其仅对选择器选中标签其作用

<head>
    <style type=”text/CSS”>
        选择器{属性1：属性值1；...}
    </style>
</head>

方式二：内行样式（内联样式），其只对某标签及其内容起作用

<标签名 style=”属性1：属性值1；...”>内容</标签名>

方式三：外部样式（外链式），即将所有样式放入一个CSS文件中，通过link引用；其对所有引入样式的页面选择器选中标签起作用；

<head>
    <link href=”CSS文件路径” type=”text/CSS”  rel=”stylesheet” />
</head>

优先级：选择器离标签相对越近，优先级越高；一般内行样式优先级最高；页面元素显示样式与选择器权重也有关，选择器权重越高，优先级也越高，且权重优先级大于距离优先级；

2.CSS基础选择器：选择标签（用于标签）

1)通配符（*和？）选择器：使页面中所有元素统一格式
格式：*{属性1：属性值1；...}

* { /* 去除所有元素默认内外边距*/
    margin:0;
    padding:0;
}

2)标签名选择器（元素选择器）：可以选择一类标签
格式：标签名 {属性1：属性值1；...}
权重：1

3)类选择器：可以为元素对象定义单独或相同的样式
定义：.类名{属性1：属性值1;...}
引用：<调用标签 class=”类名组”>

说明：

类名定义规则：
a.长名称可使用中横线；
b.不建议使用下划线（区分JS）；
c.不能以纯数字、中文命名；

多类名选择器：“类名组”（各类名用空格隔开）
注：样式与类名引用先后无关，只与类名定义先后有关

权重：10

4)Id选择器：
定义：#id名{属性1：属性值1；...}
引用：<调用标签 id=”id名”>（只能引用一次）
权重：100

5)属性选择器：对带有指定属性的 HTML 元素设置样式（>ie6）
定义：[属性名=属性值](属性值不带引号)
常用格式：标签名[xxx]

权重：10

3.复合选择器

1)后代选择器：选择所有后代标签中同类标签
格式：父选择器后代选择器｛属性1：属性值1；...｝

2)子代选择器：只选择子一代中同名标签
格式：父选择器>子代选择器 {属性名1：属性值1；...}

3)弟弟选择器：选择紧接在一个元素后的元素，而且二者有相同的父元素
格式：哥哥选择器+弟弟选择器 {属性名1：属性值1；...}

4)交集选择器：只选择指定标签名的同类名标签
格式：标签名.类名{属性名1：属性值1；...} 或标签名#id名{属性名1：属性值1；...}

5)并集选择器：同时选择多个类名或标签名（可混选）
格式：标签名|,类名|,#id{属性名1：属性值1；...}

6)伪类选择器（不能随便命名）：用于某些特殊标签添加效果
格式：标签名或类名:状态选择器{属性名1：属性值1；...}
权重：10

链接伪类选择器（锚伪类选择器）：指定超链接属性
:link：未访问的链接样式（未点击过）
:hover：鼠标移动经过时链接的样式（经过时）
:visited：已访问过的链接样式（点击过后）
:active：鼠标选定时的样式（点击时）
注：以上选择器顺序一定，不能调换，可省略，

焦点伪类选择器：指定获得焦点的表单元素的样式适用于input和textarea
用法：表单元素名:focus {属性名1：属性值1；...}
特点：获得焦点样式出现，失去焦点样式消失

7)结构伪类选择器：根据父亲选择里面的子元素（CSS3）
定义：父亲元素E:结构伪类选择器 {属性名1：属性值1；...}
权重：10

注1：对于nth-child(n)而言，

n可以是数字，关键字和公式

n如果是数字，就是选择第n个子元素，从1开始

常见的关键词: even 偶数 odd 奇数

常见的公式如下 ( 如果n是公式，则从0开始计算）
但是第0个元素或者超出了元素的个数会被忽略

注2：E:nth-child(n)与E:nth-of-type(n)的区别

nth-child从所有子级元素开始算的，可能不是同一种类型，比如 ul li:nthchild(2) 是选择第2个元素，如果是li就被选中

nth-of-type 是指定同一种类型的子级，比如 ul li:nth-of-type(2) 是选择第2个li

8)伪元素：用于向某些选择器的孩子设置特殊效果
权重：1

注1：CSS3中用双冒号代替单冒号,创建的元素默认为行内元素，需手动转换

注2：before 和 after 内必须有 content 属性，

插入图片：h1:before{content:url(logo.gif);}
插入块：h1:before{content:block;其他属性}
插入图标字体:例如
    p::before {
        position: absolute;
        right: 20px;
        top: 10px;
        font-family: ‘icomoon’;
        content: '\ea50';
        font-size: 20px;
    }
其他：h1:before{content:’文本内容’或标签名);}
/*当鼠标经过显示里面遮罩层*/	
tudou:hover::before {
    display: block;
}

4.CSS字体样式属性：字色、字号、字体、粗细、风格（用于文本）

1)color：文本颜色

预定义颜色值：red、green、blue等（英文）

十六进制表示：#+六位十六进制数（红绿蓝各两位，ff表示最深），若原色两位相同，可缩写为一位，如红色：#F00 绿色：#0F0 蓝色：#00F

RGB代码表示：如红色：rgb（255，0，0）或rgb（100%，0，0）

2)font-size：字号大小（数字+加单位），常用单位有

3)font-family：字体；

可以同时指定多个字体，中间用逗号隔开，浏览器逐个尝试；

使用中文字体名称需加英文状态下的引号，英文字体中有空格、#、$时也要加引号

尽量使用默认字体，提高兼容性

Unicode编码兼容性好，可避免出现中文

4)font-weight：字体粗细

normal：正常字体，可去标题加粗，相当于400

bold：粗体。相当于700

bolder：特粗体

lighter：细体

number：100-900之间的数都可引用

5)font-style：字体风格（斜体）

normal：正常字体，可去标题斜体

italic：斜体

obique：斜体（存在兼容问题）

6)font：综合设置字体样式，书写格式如下

选择器{
    font：font-style font-weight font-size/line-height font-family
}

不需要设置的属性可省，但font-size和font-family不能省

5.CSS文本外观样式属性（排版属性）

1)line-height：行间距（行高）

默认：行高为文本高度，顶线与盒子上边齐平

偏上：增大行高

偏下：减小行高

单位：像素px（比字号大7.8px）、相对值em、百分号%

可以没有单位，即字体大小的表示倍数；

文字始终处于行中间，因此可通过该属性设置文字垂直居中

2)text-align：水平对齐方式（盒子标签内容水平对齐）

left：左对齐（默认值）

right：右对齐

center：居中对齐

还可以让行内元素和行内块居中对齐

3)text-indent：段落首行缩进，可用的单位有

em：相对字符宽度的倍数（一般为2em：缩进两个字）

%：相对浏览器窗口宽度的百分比

允许负值

4)text-decoration：文本修饰（下划线、上划线、删除线）

none：无修饰或去修饰（可取消超链接下划线）

blink：闪烁

underline：下划线

line-through：删除线

overline：上划线

设置带颜色的下划线：text-decoration: pink underline;

5)text-shadow：文本阴影（CSS3）
能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
例如：text-shadow: 5px 5px 5px #FF0000;

6.标签显示模式（display）——>标签分类

1)块级元素（block-level）：每个元素独占一行
如h1、p、ul、ol、li、div等，其中div最典型

特点：

总是从新行开始

高度、行高、外边距及内边距可设置

宽度默认是容器的100%

可容纳其他内联元素和块元素

注意：p、h1、dt等文字块类标签内不能放块级元素

2)行内标签（inline-level）：一行内可写多个，如a、strong、b、em、i、del、s、ins、u、span（最典型）等，

特点：

和相邻行内标签在一行

宽高默认为内容宽高，不可设置

水平方向的padding和margin可设置，垂直方向无效

不能嵌套块级标签（a除外）

3)行内块元素（inline-block）：一行内可写多个，且可调整大小
如img、input、td等

特点：

相邻行内块元素在一行（中间有空隙）

高度、行高、外边距及内边距可设置

4)标签显示模式的设置：display

标签设置为行内标签：display：inline;

标签设置为块标签：display：block;

标签设置为行内块标签：display：inline-block;

7.CSS三大特性：层叠性、继承性、优先级（用于标签样式）

1)层叠性：相同选择器设置同一标签，效果不同。后出现的覆盖之前出现的属性

2)继承性：子标签可以继承父标签的部分属性（一般为文本属性，且优先级低）

3)优先级：不同选择器去处理同一标签时，同种样式处理结果显示的能力以权重（四位数表示）划分，权重越高，优先级越高

!Important用法：属性：属性值！Important;

权重相同，采用就近原则

权重叠加：例a：hover权重为0001+0010=0011，
div ul li权重为001+001+001=003

注意：叠加时不会进位

8.CSS背景

1)background-color：指定背景颜色

2)background-image：背景图片

background-image：none（默认）|url（图片路径）

3)background-repeat：背景图片平铺

repeat-x：背景图像在横向上平铺

repeat-y：背景图像在纵向上平铺

repeat：背景图像在横向和纵向平铺（默认）

no-repeat：背景图像不平铺

round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）

4)background-position：背景位置
格式：background-position：x y
即以盒子左上角为原点向下建立坐标轴，xy分别表示xy轴的坐标，取值默认 0 0，
也可以取方位名词：

center：背景图像横向和纵向居中。（居中对齐）

left：背景图像在横向上填充从左边开始。（左对齐）

right：背景图像在横向上填充从右边开始。（右对齐）

top：背景图像在纵向上填充从顶部开始。（顶对齐）

bottom：背景图像在纵向上填充从底部开始。（底对齐）

如果只指定了一个方位名词，另一个值默认居中对齐

length：可设为具体长度（图片左上角的坐标值）

第一个肯定是 x ，第二的一定是y

只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中

percentage：用百分比指定背景图像填充的位置。可为负值。

5)background-attachment：背景固定还是滚动

fixed：固定。

scroll：不固定（默认）

6)background-size（CSS3）：规定背景图片的尺寸。
格式：background-size:宽高
值：长度|百分比|cover|contain;

cover把背景图像扩展至足够大以使背景图像完全覆盖背景区域。

contain把图像扩展至使其宽度和高度等比适应内容区域

7)background：背景简写（顺序无强制要求）
一般为：background：transparent url（图片） repeat-x scroll 50% 0;
即依次指定颜色、图片、平铺、滚动、位置

8)背景透明（CSS3）：background：rgba（x1,x2,x3,x4）

x1：red，三原色之红，0-255之间取值，越大越深

x2：green，三原色之绿，0-255之间取值，越大越深

x3：blue，三原色之蓝，0-255之间取值，越大越深

x4：alpha，透明度，0-1间取值，越小越透明

9.盒子模型：网页都是由盒子组成的

盒子的组成要素：宽高+内边距+边框+外边距

1)盒子大小：

width（宽度）、height（高度）

max-width/max-height：规定元素最大宽高

min-width/min-width：规定元素最小宽高

值：像素值、百分比、auto

2)border：盒子外边框

I.四相边框：border：border-width||border-style||border-color
书写说明：可单独写，也可连写（空格分隔），无顺序要求

border-width后加值的个数可以为1-4个

一个：上下左右

两个：上下左右

三个：上左右下

四个：上右下左

border-style控制边框风格

none：无边框（默认）

solid：实线边框

dashed：虚线边框

dotted：点线边框

double：双实线边框

II.单向边框：参数和书写格式与四相边框相同

边框上线：border-top

边框下线：border-bottom

边框左线：border-left

边框右线：border-right

也有类似border-top-width等属性

III.表格细线边框：合并重叠边框（表格边框是设置值的两倍）
用法：table,td {border-collapse: collapse;}

IV.圆角边框（CSS3）：相对半径圆角
border-radius：后加值的个数可以为1-4个（百分式或像素）

一个：上下左右

两个：左上右下左下右上

三个：左上左下右上右下

四个：左上右上右下左下

V.图片边框（CSS3）：ie不支持
border-image:url(border.png) 30 30 round;

3)padding：内边距（内容与border的距离,有width和height的盒子变大）

padding：xpx 上下左右各xpx

padding-top：上内边距

padding-right：右内边距

padding-bottom：下内边距

padding-left：左内边距

注：padding后加值的个数可以为1-4个

一个：上下左右

两个：上下左右

三个：上左右下

四个：上右下左

4)margin：外边距（盒子与另一个盒子的距离，参数和padding差不多）

margin-top为负值时盒子向上走

5)常见应用与问题：

I.外边距实现盒子（块级且以指定宽度）居中对齐：

margin：length auto;（auto可看作空白）

margin：auto;（高度不影响）

margin：auto auto;（高度不影响）

margin-left：auto；margin-right：auto;

II.相邻块元素垂直外边距的自动合并（浏览器问题）：
margin-bottom：150与margin-top：100合并为150（向大合并）
解决：只指定bottom和top之一就好

III.嵌套块元素垂直外边距的合并：
对于两个嵌套的块元素，如果父元素没有内边距及边框，则父元素的上边外距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上边距为0，也会发生合并；

解决方法：

父标签指定内边距或上边框（记得剪去）

在父标签中添加overflow：hidden；

浮动、固定、绝对定位的盒子不会有问题

6)盒子阴影（CSS3）：
box-shadow：水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内/外

注：颜色通常用半透明（rgba）、默认为外部阴影（outset）

7)鼠标经过时盒子样式：div：hover{}（p、li也可以但存在兼容性问题）

.div8 {
    width: 200px;
    height: 80px;
    background-color: #aaa;
    transition: all 1s;/*设置变化时间*/
}
.div8:hover {
    box-shadow: 10px 10px 30px rgba(0,0, 0, 0.2);
}
注意嵌套：div div：hover是不行的，div a是可以的 a div是不可以的

8)CSS3盒子模型：通过box-sizing来指定盒模型

box-sizing∶content-box 盒子大小为width+ padding＋border（以前默认的）

box-sizing∶border-box 盒子大小为width

如果盒子模型我们改为了box-sizing:border-box，那padding和border就不会撑大盒子了（前提padding 和border不会超过width宽度）

旧版Firefox 需要前缀 -moz-

拾遗

1.设置列表前的小点

1)去除小点：li{list-style:none;}
2)设置图片：list-style-image:url("/i/arrow.gif");
3)内置形状：list-style-type:square;

2.盒子不继承高度
3.给了行高可以不给高
4.鼠标经过div1里面的div2的属性变化:

div1:hover div2{xxx}

同样也可以用与伪元素：div1:hover::after{xxx}

5.样式导入

@import 导入：可以把一个样式文件导入到另外一个样式文件里面；
link 导入：是把一个样式文件引入到 html页面里面

参考文献：

[1]w3school-CSS

[2]MDN-CSS

码农公寓

CSS基础语法

上下文

CSS基础语法

拾遗

相关文章