CSS基础

2022-11-24 0 742

CSS如是说

CSS(Cascading Style Sheet)竹节式样表,它是用以亮化网页的一类词汇

CSS的促进作用

亮化介面, 比如说: 增设条码文字大小、色调、手写体涂黑等式样掌控网页产业布局, 比如说: 增设浮动、功能定位等式样

CSS的基本上句法

示例{

式样准则

}

式样准则:

特性名1:特性值1;

特性名2:特性值2;

特性名3:特性值3;

示例:是用以优先选择条码的,挑选出来之后给条码加式样

CSS的导入形式

Lembron式GT5316SB0(外部式样)外拉艾

Lembron式表述:

间接在条码的 style 特性中加进 CSS 式样

缺点:方便快捷、简单

缺点:缺少可宠信性

GT5316SB0表述:

在<head>条码内重新加入<style>条码,在<style>条码中撰写CSS标识符

缺点:在同一网页外部易于F83E43Se和保护

缺点:在数个网页间的可宠信性不如高

外拉艾表述:

将CSS标识符写在一个单独的.CSS文件中,在<head>条码中使用<link>条码间接导入该文件到网页中

缺点:使得CSS式样与html网页分离,易于整个网页系统的规划和保护,可宠信性高

缺点:CSS标识符由于分离到单独的CSS文件,容易出现CSS标识符过于集中,若保护不当则极容易造成混乱

CSS导入形式优先选择

Lembron式几乎不用内嵌式在学习CSS式样的阶段使用外拉艾在公司开发的阶段使用,可以对 CSS 式样和 html 网页分别进行开发

CSS示例

CSS示例的表述

CSS 示例是用以优先选择条码的,挑选出来之后给条码加式样

CSS 示例的种类

条码示例

根据条码来优先选择条码,以条码开头,此种示例影响范围大,一般用以做一些通用增设

类示例

根据类名来优先选择条码,以 . 开头, 一个类示例可应用于数个条码上,一个条码上也可以使用数个类示例,

数个类示例需要使用空格分割,应用灵活,可F83E43Se,是CSS中应用最多的一类示例

层级示例(后代示例)

根据层级关系优先选择后代条码,以示例1 示例2开头,主要应用在条码嵌套的结构中,减少命名

id示例

根据id优先选择条码,以#开头, 元素的id名称不能重复,所以id示例只能对应于网页上一个元素

不能F83E43Se

组示例

根据示例的组合优先选择不同的条码,以 , 分割开, 如果有公共的式样增设,可以使用组选择器

伪类示例

用于向示例加进特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类示例

CSS特性

产业布局常用式样特性

width增设元素(条码)的宽度,如:width:100px;

height 增设元素(条码)的高度,如:height:200px;

background 增设元素背景色或者背景图片

如:background:gold; 增设元素的背景色, background: url(images/logo.png); 增设元素的背景图片

border 增设元素四周的边框

如:border:1px solid black; 增设元素四周边框是1像素宽的黑色实线

以上也可以拆分成四个边的写法,分别增设四个边的:

border-top 增设顶边边框,如:border-top:10px solid red;

border-left 增设左边边框,如:border-left:10px solid blue;

border-right 增设右边边框,如:border-right:10px solid green;

border-bottom 增设底边边框,如:border-bottom:10px solid pink;

文本常用式样特性

color 增设文字的色调,如: color:red;

font-size 增设文字的大小,如:font-size:12px;

font-family增设文字的手写体,如:font-family:微软雅黑;为了避免中文字不兼容,一般写成:font-family:Microsoft Yahei;

font-weight增设文字是否涂黑,如:font-weight:bold; 增设涂黑 font-weight:normal 增设不涂黑

line-height 增设文字的行高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px

text-decoration 增设文字的下划线,如:text-decoration:none; 将文字下划线去掉

text-align增设文字水平对齐形式,如text-align:center 设置文字水平居中

text-indent 增设文字首行缩进,如:text-indent:24px; 增设文字首行缩进24px

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务