CSS基础入门

当前位置:首页皇家国际官方注册页面 >

皇家国际官方注册页面

CSS基础入门

时间:2019-06-13本站浏览次数:172

       

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颜色名方式 redrgb十进制方式 rgb(255,0,0)或rgb(100%,0,0),每两位代表一种颜色,分别代表Red、Green、Blue,可以简写成#abcrgba此方式仅仅是为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 >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 只能在半角空格或连字符处换行。




公司地址:济宁市任城区
联系人:莫春宁 13613953705
王荣春 13598630338
电话:15553077082 传真:6sbipqek@162.com
邮箱:m7itw@msn.com

粤公网安备 44030702001579号

皇家国际体育网址@