做网站pyton,广东seo推广公司,做企业网站怎么样,西安手机网页制作目录
CSS基础知识
前言
准备工作
啥是CSS#xff1f;
如何引用CSS#xff1f;
选择器
通配符选择器
类名#xff08;class#xff09;选择器
id选择器
CSS解析顺序#xff08;优先级#xff09;
常见CSS标签#xff08;一#xff09;
字体属性
font-style…目录
CSS基础知识
前言
准备工作
啥是CSS
如何引用CSS
选择器
通配符选择器
类名class选择器
id选择器
CSS解析顺序优先级
常见CSS标签一
字体属性
font-style
font-variant
font-weight
font-size
font-family
font
文本属性
color
text-align
text-indent
text-decoration
text-decoration-line
text-decoration-style
text-decoration-color
text-transform
direction
unicode-bidi
letter-spacing
word-spacing
line-height
vertical-align
white-space
text-shadow
预告和回顾
后话 CSS基础知识
前言
本系列博客将分享层叠样式表CSS有关的知识点。
作为本系列的第一篇本文主要讲解CSS的基础概念和常见的使用方式。
不是专业的科普博主主打一个分享知识写的不好多多包涵哈哈。
准备工作
软件【参考版本】Visual Studio Code
插件扩展包Office Viewer(Markdown Editor)
浏览器版本Chrome
系统版本 Win10/11/其他非Windows版本
*我的电脑是Win10的版本仅供参考*
啥是CSS
HTML中可以使用的样式比较少很多效果并不能满足我们的要求。而且HTML元素的属性广泛分布于各种元素中如果想修改某一类属性就会非常麻烦。
在这种需求之下从HTML4开始引入了层叠样式表Cascading Style SheetsCSS的概念。
CSS在网页三层结构中隶属表现层。HTML的功能是提供基本的元素而CSS则负责将这些元素的视觉效果展现给我们即定义如何显示HTML元素。
对于样式来说多个样式可以层叠为一个。
CSS在HTML中通常以style标签或属性的形式出现。
CSS代码为类似下面的格式
xxx {}
实质上是选择器和对应的样式属性。
如何引用CSS
现在我们有一个基本的HTML页面 比如我想让我的标题变成红色有哪些方式
第一种可以直接在h1标签里添加style属性代码如下
h1 stylecolor: red;这里有一个标题/h1
第二种可以在head标签里添加style标签代码如下
styleh1 {color: red;}/style
第三种还可以在同级文件夹不同文件夹记得改相对路径里新建一个层叠样式表文件文件中的内容如下
h1 {color: red;
}
然后利用link标签使用下面的代码在头部head引入这个文件
link relstylesheet hrefstyle.css
以上三种方式都可以让页面在浏览器里显示出如下效果 上述三种方式就是常见的CSS的引用方式了。一般我们把这三种引用方式分别称为
行内/内联样式表内部样式表外部样式表
在未来的开发当中由于需要定义的样式很多所以一般会使用外部样式表的方式来定义样式。
使用外部样式表可以真正意义上实现内容和表现分离以分文件的形式实现web页面方便进行代码维护。
之后的CSS代码除非特殊说明我将使用引入外部样式表的形式来演示。
选择器
还是刚才的例子只不过这次我想将其中的第一段文字变为黄色。
*这里不推荐使用行内/内联样式哈不符合分离的思想*
如果类比标题的颜色设置方式效果应该是这样的 显然这不符合单独设置的需求。
要想选择特定的某一个些元素设置样式就需要使用到选择器。
常见的选择器类型如下
形式对应类型作用权重* { }通配符选择器为所有元素设置默认样式0xxx { }标签选择器通过标签名选择元素1.xxx { }类名选择器通过类名class属性选择元素10#xxx { } id选择器 通过id名id属性选择元素100
通配符选择器
如果全局中的元素没有设置样式则使用通配符选择器中的样式。
可以用于预设一些默认样式比如字体、颜色等。
类名class选择器
以示例网页为例使用类名选择器选择第一段内容——
HTML代码如下
p classp1这里是内容/p
CSS代码如下
.p1 {color: yellow;
}
网页中效果展示 在使用类选择器时我们也可以为同一个class属性分配多个类选择器中间使用空格隔开。
就像一个人可以分类为“成年人”也可以分类为“学生”。
为第一段的内容添加第二个类选择器将它的字体放大——
HTML代码如下
p classp1 big这里是内容/p
CSS代码如下
.big {font-size: large;
}
网页中效果展示 id选择器
使用id选择器选择第二段内容将它设置为蓝色——
HTML代码如下
p idp2这里是内容/p
CSS代码如下
#p2 {color: blue;
}
网页中效果展示 *注意id的值应当是唯一的不允许有两个元素的id值相同*
CSS解析顺序优先级
CSS文件默认按照从上往下的顺序解析。
就拿标签选择器来说我们现在对第三行内容在CSS中同时设置两种样式天蓝和深蓝
.p3 {color: aqua;
}.p3-2 {color:blue;
}
那么在网页中看到的效果如下 这说明对于相同级别的选择器来说解析顺序依然是从上到下下层的样式会覆盖上层的。
但是在有了几种选择器的概念之后就可以引入下一个概念——优先级来改变默认的解析顺序。
如何证明这种优先级的关系呢比如我们现在将上面HTML文件和CSS文件中的类名“p3”改成id名“p3”其余不变——
HTML代码如下
p classp3-2 idp3这里是内容/p
CSS代码如下
#p3 {color: aqua;
}.p3-2 {color:blue;
}
网页中看到的效果如下 可以看到即使id选择器的样式设置在class选择器的上方后者也依旧无法覆盖前者。
一般的我们使用权重来体现选择器的优先级权重越大优先级越高。
优先级由低到高排序为
选择器权重* { }0xxx { }1.xxx { }10#xxx { }100行内/内联样式1000!important10000
其中!important放在具体要提到最高级的属性值之后比如
.p3-2 {color:blue !important;
}
行内/内联样式和!important通常只在代码量相当大以至于几乎没有办法设置某个单独的属性值时使用尽量还是使用前四种。
常见CSS标签一
字体属性
CSS的字体属性用于定义字体的样式如大小、粗细、风格等。
font-style
该属性用于设置字体的样式即显示的效果常见的属性值及其对应的含义如下
属性值含义normal默认 标准样式italic设置斜体oblique强制设置斜体
对于有些字体库其中不含某些生僻字的斜体效果这时就需要使用oblique将这些无法设置斜体效果的字做倾斜处理。
font-variant
该属性用于设置小型大写字母常见的属性值和对应的含义如下
属性值含义normal正常字体small-caps大写字母但是比正常的大写字母要小
什么是小型大写字母呢 我们利用行内样式来简易比较一下输入下面HTML代码
p stylefont-variant: small-capsabcdefg/ppABCDEFG/p
运行的效果如下 该属性常常用于一些英文网站。
*对中文不生效*
font-weight
该属性用于设置字体粗细常见的属性值及其对应的含义如下
属性值含义normal正常粗细light细lighter更细bold粗bolder更粗
特别的属性值也可以是数字范围是100~900。
其中normal对应的数字是400bold是700。
font-size
该属性用于设置字体大小常见的单位及其对应含义如下
单位含义默认值绝对/相对px像素16绝对单位%相对于父元素的字体大小的百分比大小100相对单位rem相对根元素的字体大小的倍数1相对单位em相对父元素的字体大小的倍数1相对单位
对于%如果值超过100则会比父元素字体大。
rem全称root element这里是一个倍数即根元素HTML的“字体大小”ד这个倍数”。em同理。
em在以后的移动端开发中会比较常用可以了解一下。
font-family
该属性用于设置字体的系列属性值是字体的名称比如宋体、楷体等常见的属性值和对应的含义如下
属性值含义宋体宋体字kaiti楷体字黑体黑体字
使用中文属性值时需要加上单引号。
family-name可以设置一系列字体名称并使用回退系统。该系统的作用是当第一种字体不支持时自动顺延到下一种字体以此类推。
比如像下面这样以逗号分隔属性值即可
font-family: kaiti, 黑体, 宋体;
font
按上面的顺序font-style - font-variant - font-weight - font-size - font-family输入对应属性值直接设置上述所有的属性。这是一种简写的属性写法。
比如我们为之前的标题设置下面的CSS代码
font: italic normal lighter 50px kaiti;
那么原来的标题就会变成如下样式 当然该属性的值有一种简写的方式即只写font-size和font-family的值。至少要有这两个值要么是五个值要么是两个值。
文本属性
文本的属性比较多这部分将介绍各个属性以及对应的值或者复合属性一次性设置的值。
color
该属性用于设置文本颜色。常见的设置方式有
属性值类型表现方式值颜色名颜色英文名redgreenblue等十六进制#XXXXXX每两位分别代表RGB通道中的一种颜色00~FFFF代表255rgb(x,x,x)每个数字代表RGB通道中的一种颜色0~255rgb(x,x,x,n)前三位略最后一位代表不透明度最后一位0~1越大越透明
text-align
该属性用于定义文本相对父元素的水平对齐方式。常见的属性和含义如下
属性值含义left靠左对齐right靠右对齐center居中对齐justify长文本段落两端对齐
关于最后一点如果对于比较短的文本来说是看不出效果的。
因为两端对齐的条件是文本内容可以触及父元素的两侧边界效果和Word文档中的分散对齐一致。
text-indent
该属性用于设置文本首行缩进值为数字。常见的单位有
单位含义绝对/相对px像素绝对单位%相对父元素的字体大小缩进百分比相对单位rem相对根元素的字体大小缩进倍数相对单位em相对父元素的字体大小缩进倍数相对单位
text-decoration
该属性用于设置文本修饰它可以一次性设置三个属性以空格分开。
下面按照顺序来简写下面三个属性
text-decoration-line
第一个属性用于设置修饰的位置它的值和对应的效果如下
属性值效果none无效果underline下划线效果overline上划线效果line-through表现为删除线blink文字闪烁效果
其中文字闪烁效果我暂时没有看出来有兴趣的朋友可以自行搜索。
text-decoration-style
第二个属性用于设置修饰的样式它的值和对应的效果如下
属性值效果solid默认 单实线double双实线dashed虚线dotted点状线wavy波浪线
text-decoration-color
第三个属性用于设置文字修饰效果的颜色可以使用颜色名、十六进制、RGB和RGBa等方式。
前文已经叙述过此处不再叙述。
text-transform
该属性用于进行文本转换即大小写转换一般用于处理英文对中文无效。
常见的属性值和对应功能如下
属性值作用none默认 不转换uppercase全部转大写字母lowercase全部转小写字母capitalize首字母转大写
direction
该属性用于设置文本方向常常和unicode-bidi配合使用。它的属性值和对应含义为
属性值含义ltr从左到右输出文字rtl从右向左输出文字
unicode-bidi
指定返回的文本是否重写它的属性值和对应的含义为
属性值含义bidi-override 创建了一个附加的嵌入层面 是否重新排序取决于direction属性
letter-spacing
该属性用于设置字符间的间距。它的属性值和对应的含义为部分前文中已经释义过的内容将省略解释
属性值含义normal默认值 无额外间距px % rem em略
需要注意的是对于中文而言一个汉字就是一个字符对英语而言一个字母为一个字符。
word-spacing
该属性用于设置单词之间的间距以空格作为分词标准。它的属性值和对应部分的含义与letter-spacing相同。
值得注意的是由于中文的语法中不使用空格作为分词标准所以这种方式设置空格对于整段的中文来说是无效的。
line-height
该属性用于设置文本行高即上一行文本的底部到下一行文本底部的距离。
vertical-align
该属性用于设置元素的垂直对齐方式注意不是给文字设置这是给其他元素设置用来与文字对齐。
它的属性值和对应的作用如下
属性值作用baseline默认值 放在父元素的基线上top与行内最高元素的顶端对齐middle与父元素的中部对齐bottom与整行的底部对齐sub/super对齐文本的下标/上标text-top对齐父元素字体的顶端text-bottom对齐父元素字体的底端px将当前的元素升高的距离为负数则为降低%将当前的元素升高相对父元素的百分比距离为负数则为降低
white-space
设置元素中空白多空格、回车等的处理方式。
它的属性值和对应的效果如下
属性值效果normal默认效果忽略文字空白手动输入换行被替换为一个空白pre保留空白和手动输入的换行nowrap不会换行除非有br /pre-wrap保留空白和手动输入的换行且边界自动换行pre-line忽略文字空白但是保留手动输入换行
text-shadow
这个属性是CSS3中更新的内容用于设置文本阴影。
按顺序简写下面四个属性
属性名值范围属性值位置从左开始含义h-shadow右移为正左移为负1水平阴影位置v-shadow下移为正上移为负2垂直阴影位置blur0或正值3模糊范围模糊距离模糊度color略4阴影颜色
预告和回顾
在下一期博客中我将会开始写CSS的背景属性、表格和表单的样式。
对CSS文件感兴趣的朋友我将在CSS入门第二期博客时创建CSS入门系列专栏到时候可以在专栏中查看。
当然也欢迎对全站项目感兴趣的朋友查看我的其他专栏。
后话
在全栈领域博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历然后把自己领悟到的一些东西总结一下分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的一些定义性的文字加入了笔者自己的很多理解在里面所以仅供参考。如果有说的不对的地方还请谅解。
期待与你在下一期博客中再次相遇
——勉强还有点氧气的【H2O2】
