CSS基础入门
css基础语法
一、CSS格式
选择器{
属性名:属性值;
属性名:属性值;
}
选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式
二、CSS三种引入方式
1.行间式
<p style="color:red;"</p>
2.内联式
<style>
p {
color:red
}
</style>
3.外联式
p {
width: 100px;
height: 100px;
background-color: red;
}
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
三种引入方式对比
<!-- 行间式 -->
<!-- 1.在标签头部的style属性内 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key:value新式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开 -->
<!-- 内联式 -->
<!-- 1.在style标签内(style标签一般作为head的子标签) -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key:value新式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
<!-- 5.格式:选择器{样式块} -->
<!-- 外联式 -->
<!-- 1.在外部css文件中 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key:value新式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开 -->
<!-- 5.格式:选择器{样式块} -->
<!-- 6.将html与css文件建立联系:html通过link标签链接外部css(一般在head里面) -->
三种引入方式的优先级
注:三种方式间没有优先级
<!-- 1.三种方式协同布局: -->
<!-- 2.不重复的属性一定为唯一位置的唯一值 -->
<!-- 3.重复的属性采用覆盖赋值,保留最后位置的属性值 -->
<!-- 4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式) -->
<!-- !important 会影响优先级 -->
补:CSS的注释:
/*注释内容*/
三、CSS的长度单位和颜色单位
1.CSS基本长度单位
- px像素,屏幕上显示的最小单位,用于网页设计
- mm毫米
- cm厘米
- in英寸
- pt点 1pt=72in,用于印刷业
- em相当长度,一般1em=16px,用于流式布局
- 50vw==>%50 view width 当前浏览器能显示界面的一半
2.CSS基本颜色单位
- colorName颜色名方式 red
- rgb十进制方式 rgb(255,0,0)或rgb(100%,0,0),每两位代表一种颜色,分别代表Red、Green、Blue,可以简写成#abc
- rgba此方式仅仅是为rgb方式加上了Alpha(不透明度),不透明度范围为[0-1]
- hsl()工业界的颜色标准,H(色相)S(饱和度)L(明度),第一个参数为0-360,后两个为百分比.
四、CSS选择器(基础)
1.通配选择器
通配选择器(*):匹配所有(html,body,body中的所有子标签(具有显示效果的标签)
*{
border: solid;
}
2.标签选择器
标签选择器(标签名):匹配指定标签名的对应所有标签
div{
width: 100px;
height: 100px;
background-color: red;
}
3.类选择器
类选择器(.):匹配指定类名对应的所有标签
.dd{
font-size: 50px;
}
<div class="dd">d_1</div>
4.id选择器
id选择器(#):匹配指定id名对应的唯一标签
#ele{
color: blue;
}
总结
1.通配选择器一般用于整体reset操作(清除系统自定义样式)
*{
margin: 0;
}
2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局
3.类选择器为布局首选(建议基本全用class选择器进行布局)
基本选择器优先级:id>class>标签>通配
五、CSS常用属性和值
1.字体属性
- font-family: 字体族科,多值用于备用,以,隔开
font-family: "STSong", "Arial";
- font-size: 字体大小
- font-style: 字体风格normal(普通,初始值) italic(斜体)oblique(倾斜)
- font-weight:字体重量 normal(普通)bold(加粗)lighter(细)|100最细,900最粗
- font-height: 行高,行高设置大于等于字体大小,字体在行高中垂直居中显示
- font: [weight | style] size family` 为复合属性(推荐使用)
font:lighter italic 80mm "Calibri","微软细黑"
注:空格隔开多个值赋值,逗号隔开为一个值多值赋值
2.文本属性
- color 设置文字颜色
- text-align 水平居中方式(left center right)
- text-decoration 字划线(下划线:underline 中划线:line-through 上划线:overline)
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
- letter-spacing:字间距
- word-spacing:词间距
- vertical-align:垂直对齐方式(一般用于图片和文字中间对齐)
baseline: 将支持valign特性的对象的内容与基线对齐
sub: 垂直对齐文本的下标
super: 垂直对齐文本的上标
top: 将支持valign特性的对象的内容与对象顶端对齐
text-top: 将支持valign特性的对象的文本与对象顶端对齐
middle: 将支持valign特性的对象的内容与对象中部对齐
bottom: 将支持valign特性的对象的文本与对象底端对齐
text-bottom: 将支持valign特性的对象的文本与对象顶端对齐
<percentage>: 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
<length>: 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)
text-indent:首行缩进
word-break规定自动换行的处理方式
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。(遇到连体的英文,html将其解析为一个单词)
keep-all 只能在半角空格或连字符处换行。
CSS基础入门的更多相关文章
- 第五十五天 css基础入门
一.引入css的三种方式 1.行间式 <div style="width: 100px; height: 100px; background-color: red">& ...
- 【WEB基础】HTML & CSS 基础入门(9)CSS盒子
网页上的元素辣么多,我该用什么办法让它们排列整齐.间距合理呢.常干家务的朋友们就容易理解了,用收纳盒呀! 所以用CSS做网页布局就涉及一个盒子的概念,简单理解,我们可以把页面上的所有HTML元素看作一 ...
- 【WEB基础】HTML & CSS 基础入门(7)表格
表格的基本结构 表格是网页上最常见的元素,它除了可以用来展示数据,还常常被用来排版.虽然现在提倡使用DIV+CSS完成页面布局,但表格框架简单明了,对于繁杂的数据,一个简洁的表格能让其展现的极有条理. ...
- 【WEB基础】HTML & CSS 基础入门(5)边框与背景
前面(HTML图片) 漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片). 之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单 ...
- 【WEB基础】HTML & CSS 基础入门(3)段落及文本
写在前面:CSS选择器 网页要显示很多内容,想要为每个内容设置不同的样式,我们就得首先选中要设置样式的内容,CSS选择器就是指明该样式是针对HTML里哪一个元素的.简单的例子,网页上有几段文字,我们想 ...
- 【WEB基础】HTML & CSS 基础入门(4)列表及其样式
前面 网页中漂亮的导航.整齐规范的文章标题列表和图片列表等等.这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表.有序列表和定义列表三种类型.其中,无序列表应用最为广泛,下面, ...
- 【WEB基础】HTML & CSS 基础入门(2)选取工具:VS2019安装使用
前面 子曰“工欲善其事,必先利其器”.开始编写HTML代码前,我们该选择一款编辑工具,实际上,HTML作为标记语言,我们甚至可以直接用记事本来编写HTML代码,但记事本实在弱爆了.这里推荐使用Visu ...
- 【WEB基础】HTML & CSS 基础入门(1)初识
前面 我们每天都在浏览着网络上丰富多彩的页面,那么在网页中所呈现出的绚丽多彩的内容是怎么设计出来的呢?我们想要自己设计一个页面又该如何来做呢?对于刚刚接触网页设计的小伙伴来说,看到网页背后的一堆符号和 ...
- css 基础入门
CSS 概述 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,css 由此而生,css 是 Cascading Style Sheets 的字母缩写,意思是层叠样式表,有了 css,h ...
随机推荐
- 使用 JS 实现文字左右跑马灯
Ø 前言 其实,前面两篇已经基本上实现了图片.文字跑马灯,这里为什么还要学下文字左右跑马灯呢?因为,虽然基本一样,但实现起来还是有很大不同的,所以为了完整再补充一下.代码如下: 1. 首先定义 ...
- 常用.net反编译替换正则表达式
.set_([^\(]*) .$ = ------------------ .get_([^\(]*)\(\) .$ ------------------ .get_Item\(([a-z|-]+)\ ...
- TF, IDF和TF-IDF
在相似文本的推荐中,可以用TF-IDF来衡量文章之间的相似性. 一.TF(Term Frequency) TF的含义很明显,就是词出现的频率. 公式: 在算文本相似性的时候,可以采用这个思路,如果两篇 ...
- MacOS安装kafka可视化工具Kafka Tool
1 下载地址 http://www.kafkatool.com/download.html 2 下载dmg包,选择对应版本,我的kafka是2.1的版本,所以选择了Kafka Tool 2.0.4 3 ...
- Android逆向基础----APK文件结构
参考这个博客 http://www.cnblogs.com/wangtianxj/archive/2010/06/13/1757639.html http://blog.csdn.net/bupt07 ...
- Challenge Create a Launch Pad
在头文件中定义网格体组件和重叠组件 UPROPERTY(VisibleAnywhere,Category="Components") UStaticMeshComponent* M ...
- Centos7.5 VMtools的安装与卸载
一.安装 1.自带tools: 选择VMware工具栏 => 虚拟机 => 安装VMtools 2.挂载光驱 3.tar -zxvf VMwareTools-10.3.2-9925305 ...
- SQL逻辑查询语句执行顺序
阅读目录 一 SELECT语句关键字的定义顺序 二 SELECT语句关键字的执行顺序 三 准备表和数据 四 准备SQL逻辑查询测试语句 五 执行顺序分析 一 SELECT语句关键字的定义顺序 SELE ...
- Linux动态调频系统CPUFreq之一:概述【转】
转自:https://blog.csdn.net/zhangyongfeiyong/article/details/53506362 随着技术的发展,我们对CPU的处理能力提出了越来越高的需求,芯片厂 ...
- make 命令【转】
转自:https://www.ibm.com/support/knowledgecenter/zh/ssw_aix_71/com.ibm.aix.cmds3/make.htm#make__row-d3 ...