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基础入门的更多相关文章

  1. 第五十五天 css基础入门

    一.引入css的三种方式 1.行间式 <div style="width: 100px; height: 100px; background-color: red">& ...

  2. 【WEB基础】HTML & CSS 基础入门（9）CSS盒子

    网页上的元素辣么多,我该用什么办法让它们排列整齐.间距合理呢.常干家务的朋友们就容易理解了,用收纳盒呀! 所以用CSS做网页布局就涉及一个盒子的概念,简单理解,我们可以把页面上的所有HTML元素看作一 ...

  3. 【WEB基础】HTML & CSS 基础入门（7）表格

    表格的基本结构 表格是网页上最常见的元素,它除了可以用来展示数据,还常常被用来排版.虽然现在提倡使用DIV+CSS完成页面布局,但表格框架简单明了,对于繁杂的数据,一个简洁的表格能让其展现的极有条理. ...

  4. 【WEB基础】HTML & CSS 基础入门（5）边框与背景

    前面(HTML图片) 漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片). 之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单 ...

  5. 【WEB基础】HTML & CSS 基础入门（3）段落及文本

    写在前面:CSS选择器 网页要显示很多内容,想要为每个内容设置不同的样式,我们就得首先选中要设置样式的内容,CSS选择器就是指明该样式是针对HTML里哪一个元素的.简单的例子,网页上有几段文字,我们想 ...

  6. 【WEB基础】HTML & CSS 基础入门（4）列表及其样式

    前面 网页中漂亮的导航.整齐规范的文章标题列表和图片列表等等.这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表.有序列表和定义列表三种类型.其中,无序列表应用最为广泛,下面, ...

  7. 【WEB基础】HTML & CSS 基础入门（2）选取工具：VS2019安装使用

    前面 子曰“工欲善其事,必先利其器”.开始编写HTML代码前,我们该选择一款编辑工具,实际上,HTML作为标记语言,我们甚至可以直接用记事本来编写HTML代码,但记事本实在弱爆了.这里推荐使用Visu ...

  8. 【WEB基础】HTML & CSS 基础入门（1）初识

    前面 我们每天都在浏览着网络上丰富多彩的页面,那么在网页中所呈现出的绚丽多彩的内容是怎么设计出来的呢?我们想要自己设计一个页面又该如何来做呢?对于刚刚接触网页设计的小伙伴来说,看到网页背后的一堆符号和 ...

  9. css 基础入门

    CSS 概述 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,css 由此而生,css 是 Cascading Style Sheets 的字母缩写,意思是层叠样式表,有了 css,h ...

随机推荐

  1. SQL Server进阶 遍历表的几种方法

    https://www.cnblogs.com/mcgrady/p/4182486.html

  2. 关于JDBC技术中，调用MySQL中不建议在没有服务器身份验证的情况下建立SSL连接错误解决

    今天学习到了JBDC前沿:对JDBC编写步骤的封装,出现了一大串红色报错(当然,也不能叫报错,毕竟不是所有的红色都是错误eeror,) 错误如下: Establishing SSL connectio ...

  3. js判断浏览器类型和版本

    原网址:http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html 除了另无它法,肯定不使用navigator.userAgen ...

  4. 关于SQL的over partition by 开窗语句在分页和统计中的使用总

    CREATE TABLE OrderInfo( ID INT IDENTITY(1,1) PRIMARY KEY, CustomerID INT NULL, TotalMoney DECIMAL(18 ...

  5. renren-security旧版本 分模块 的模块之间关系浅析

    Maven结构,一个父模块 六个子模块 七个pom.xml: \git\renren-security\pom.xml <modules> <module>renren-com ...

  6. Centos7 nginx报错403 forbidden

    参考链接:http://www.cnblogs.com/chinway/archive/2017/08/14/7356239.html 因为安全性的考虑这个也是默认会出现的错误,因为SELinux的存 ...

  7. shellb编程 之 实践出真知

    1.查询file1 里面空行的所在行号 纯空行:awk ‘{if($0~/^$/)print NR}’ file 空行和带空格,制表符等的行:awk '$0~/^\s*$/' file 2.查询fil ...

  8. 【NLP CS224N笔记】汇总

    [NLP CS224N笔记]Lecture 1 - Introduction of NLP [NLP CS224N笔记]Lecture 2 - Word Vector Representations: ...

  9. python,关于这个里边的私有方法（private）、保护方法(protected)、公开方法(public)

    __foo__: 定义的是特殊方法,一般是系统定义名字 ,类似 __init__() 之类的. _foo: 以单下划线开头的表示的是 protected 类型的变量,即保护类型只能允许其本身与子类进行 ...

  10. 3D中的旋转变换

    相比 2D 中的旋转变换,3D 中的旋转变换复杂了很多.关于 2D 空间的旋转,可以看这篇文章.本文主要粗略地探讨一下 3D 空间中的旋转. 旋转的要素 所谓旋转要素就是说,我们只有知道了这些条件,才 ...