ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

CSS基础语法

2022-01-18 13:34:55  阅读：88  来源： 互联网

标签：标签 元素 基础 语法 border 选择器 CSS 属性


CSS基础语法

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

上下文

CSS简介：

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

CSS文档

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

推荐文章：

CSS基础语法

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

1.CSS基本使用

1)CSS样式规则：

img

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]
img
权重：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
img

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

  • n可以是数字，关键字和公式
  • n如果是数字，就是选择第n个子元素，从1开始
  • 常见的关键词: even 偶数 odd 奇数
  • 常见的公式如下 ( 如果n是公式，则从0开始计算）
    但是第0个元素或者超出了元素的个数会被忽略
    img

注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
img

注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：字号大小（数字+加单位），常用单位有
img

3)font-family：字体；

  • 可以同时指定多个字体，中间用逗号隔开，浏览器逐个尝试；
  • 使用中文字体名称需加英文状态下的引号，英文字体中有空格、#、$时也要加引号
  • 尽量使用默认字体，提高兼容性
  • Unicode编码兼容性好，可避免出现中文
    img

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：行间距（行高）
img

  • 默认：行高为文本高度，顶线与盒子上边齐平
  • 偏上：增大行高
  • 偏下：减小行高
  • 单位：像素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)优先级：不同选择器去处理同一标签时，同种样式处理结果显示的能力以权重（四位数表示）划分，权重越高，优先级越高
img

  • !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.盒子模型：网页都是由盒子组成的
img
盒子的组成要素：宽高+内边距+边框+外边距

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：水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外
img
注：颜色通常用半透明（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

标签：标签,元素,基础,语法,border,选择器,CSS,属性
来源： https://www.cnblogs.com/feihuing/p/15817373.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有