两天学会css基础(一)

 

什么是csscss的作用是什么?

CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式,搭建页面结构,比如设置元素的宽高大小,颜色,位置等等。

学习css之前先了解一下css代码在HTML中的书写位置。

样式名称

存放位置

使用范围

应用

嵌套样式

head中的title下面

当前样式所处的页面

存放当前页面会用到的样式

行内样式

标签中通过style设置样式

只作用于当前标签

很少使用(一般可以临时使用)

外联样式

存放于其他文本中,使用时通过link标签引用

所有的页面都可以引用

存放一些所有页面都会用到的公共样式

css代码书写位置有三种形式:

1,第一种,用style标签包裹。通常放在HTMLhead标签里。

<style>

div{width: 100px;height: 100px;border: 10px solid red;margin: 0 auto;}

</style>

2,第二种,嵌套在HTML代码的行内。比如<div style=color : red ;font-size : 20px></div>这种形式现在不常用,现在提倡结构与样式分离的写法。

 3,第三种,写在 .css文件里,通过在HTML加入link标签进行引入。

<link rel="stylesheet" href="css/index.css">

练习时候可以都尝试一下,实际项目中多数用第三种写法。

在我看来,css基础内容其实就五大部分。

第一部分:盒模型

盒模型顾名思义,可以想象为我们生活中的一个纸盒子或木盒子。

它有三个属性,分别为:marginpaddingborder

margin指盒子的外边距;padding指大盒子内边与盒子内容的距离;border就指盒子的边框。不理解的可以看下图:

 

块级元素都可以看做是一个盒子。

既然提到了块级元素,那就顺便说一说HTML元素的三种类型。改属性由css中的display属性控制。

display:block;:块级元素。在浏览器内独占一行,可以设置宽高。代表元素<h1><p><div>等。

display:Inline-block;:行内块级元素,可以设置宽高,一行可以同时存在多个。代表元素:<img>,<input>

display:Inline;:行内元素,不可以设置宽高,大小由内容决定。代表元素<a>,<b>,<span>

但是这三种类型是可以通过display属性设定的。以上举例只是该元素的默认display属性。

 

其实一个网页就是由一个个大小不同的盒子构成的通过对盒模型的学习为后面搭建页面结构奠定基础

第二部分:基础选择器

选择器又是什么为什么要学习选择器

个人理解要对HTML标签结构进行样式修饰必须先找到要修饰的标签选择器的作用就是帮助我们选择获取我们要进行样式修饰的HTML标签

Css常用的基础选择器有七种

1,标签选择器

标签选择器的名字就是选择器名。

写法如下:

标签名{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

........

}

作用:会将所有的这类标签都加上相同的css属性

2类选择器

类名是由标签的class属性进行定义的。

写法如下,类名前面需要加上一个点

.类名{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

........

}

作用:会选择到页面上所有拥有这个类名的元素

3id选择器

id名是由标签的id属性进行定义的。

写法如下,id名前面需要加上一个井号。

#id{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

...........

}

作用:元素的id值是唯一的,只能对应于文档中某一个具体的元素。

 将拥有这个id名的唯一元素加上css样式。

补充:

1id选择器与类选择器的区别

   aid选择器 相当于人的身份证

     一个id名只能设置给一个元素并且元素只能有一个id

   bclass类选择器  相当于人的名字,会有重名的现象。

多个元素可以设置同样的class 一个元素也能有多个不同的class

2 id选择器与类class选择器的命名规则

   2.1、命名的取值规范只能是:0-9a-zA-Z_-

   2.2、不能以数字开头

4并集选择器

作用:将两种类型的元素全部选择出来。

多个选择器用逗号隔开,代码:

选择器1 ,选择器2

属性名1:属性值1;

属性名2:属性值2;

.......

5交集选择器

作用:从两个集合中选择中它们相同部分:

多个选择器紧挨着写,代码:

选择器1选择器2 {
属性名1:属性值1;

属性名2:属性值2;

.......

}

6后代选择器

作用:选择一个标签中所有后代标签里满足条件的标签。

代码:

 选择器(空格)选择器 选择器

属性名1:属性值1;

属性名2:属性值2;

.......

7子代选择器

作用:得到 当前标签中的直接子元素(直接放在标签下面没有经过任何标签的嵌套)

多个选择器用右尖括号连接,代码:

选择器>选择器{

属性名1:属性值1;

属性名2:属性值2;

.......

 

8通配符

*

作用:用于作用于页面上所有的标签.

代码:

<style>

 * {

属性名1:属性值1;

属性名2:属性值2;

.......

}

</style>

注意:通配符在进行选择的时候,会去遍历页面上所有的标签,并且给这些标签设置对应的属性。

 

更多的css3选择器后续再做补充。

选择器的概念讲完了,我们就可以通过选择器对HTML元素设置样式了。

不同的选择器会有不同的应用场合,只能在练习中慢慢体会了。

选择器的权重

学到了选择器,还不得不说一下权重的问题了。

不同选择器的优先级是不同的,对同一个属性设置不同的值,优先级高的选择器设置的样式会把优先级低的层叠掉。这也就是css的特性之一:层叠性。

同时css还有一个特性称为,继承性。也就是说对某个父元素设置了css属性,其子元素没有进行设置,这时候默认会继承父元素的属性。

优先级:

important>行内样式>id选择器>类选择器>标签选择器>通配符>浏览器默认样式>继承

important 的优先级最高,实际用的不是太多,一般会在调试代码时用到。用的时候直接写到要作用的属性值后面。但是请注意:!important属性无法继承。

div {

color: red !important;

}

行内样式优先级其次,在css代码书写位置时已经讲过,就是将css直接以属性的形式写在HTML标签里。

Id选择器,类选择器,标签选择器,通配符,继承这些上面都说过了。

还有一个浏览器默认样式,不同的标签浏览器会有给个默认的样式,比如a标签默认会有一个下划线,颜色是蓝色的等。

  • 计算组合选择器的权重
  • (0,0,0,0)
  • (improtant,id选择器,类选择器,标签选择器)

0000==》第一个0对应的是important的个数,第二个0对应的是id选择器的个数,第三个0对应的类选择器的个数,第四个0对应的是标签选择器的个数,就是当前选择器的权重。

  • 规则
  • 1. 先看有没有选中,如果选中了,那么以(id数,类数,标签数)来计权重。谁大听谁的。如果都一样,听后写的为准。
  • 2. 如果没有选中,那么权重是0。如果大家都是0,就近原则。

 

注意选择器的工作原理:选择器在查找元素的时候不是从左往右找,而是从右往左找。

 

OK,到这里css的选择器部分算是讲完了,学习完选择器我们就可以对元素进行样式修饰了,如何修饰?请看下面常用样式修饰部分。

第三部分 常用样式修饰

常用样式设置:

1,尺寸大小widthheight

对于一个元素我们可以通过它的宽高width,height来设定它的大小。注意属性值的单位是像素px,也可以用百分比的形式。

如下:div{

width200px;

height:  100px;

}

div{

width80%;

height:  100%;

}

 

2, 背景background

背景相关的属性:

background-image:设置背景图片。写法:background-image:url(图片的路径);//默认情况下图片如果比容器要小,它会平铺。

background-repeat:设置背景是否平铺:

取值:

no-repeat:不平铺

repeat-x:在水平方向上平铺

repeat-y:在垂直方向上平铺

repeat:平铺

background-position:设置背景图片的位置

用法:

background-postion: x y;

注意:x,y可以是具体的数值

x,y又可以是一些英文单词。

x: left 左  center right

y: top 上  center bottom

背景的连写方式

background: background-color background-image background-repeat background-position;

3, 字体font

字体样式相关的属性:

font-size: 18px;  字体大小

font-weight: bold或者normal或者100-900的整数;  字体粗细

font-family: "微软雅黑";  字体类型

font-style: normal或者italic;   字体样式

Font的连写方式

Font-size font-family 必须写

Font:Font-style font-weight font-size font-family;

 

4, 文本text

text-align用于设定文字的对齐方式

有三种方式

left: 内容左对齐。

center: 内容居中对齐。

right: 内容右对齐。

text-indent:用于文字缩进。属性值可直接用像素值px表示。

text-decoration: 用于修饰文本none | underline | overline | line-through

none:

指定文字无装饰

underline:

指定文字的装饰是下划线

overline:

指定文字的装饰是上划线

line-through:

指定文字的装饰是贯穿线

line-height:定义行高。

word-spacing 定义单词间的空白(即字间隔)。

p {

  word-spacing:25px;

  }

5, 颜色color

3种定义颜色的形式,

1, 颜色关键字表示法,可直接用英文单词来定义,比如redbluegreen等。

2, 16进制表示法,用#000000#ffffff区间内的16进制数来表示。

3, 三原色表示法,rgbrgb,其中r,g,b分别代表红色,绿色,蓝色,取值范围为0255.

6, 边框border

border有三个属性,宽度,样式,颜色。常用样式分为solid实线,dashed虚线,dotted点线,double双线轮廓

border:1px solid red;这是border的复合写法。也可以分开来写

border-width: 5px;

border-style: dashed;

border-corlor: #ccc;

此外。四个边也可以分别进行修饰,如border-topborder-bottomborder-leftborder-right

分别对应上下左右四个边。

7marginpadding

marginpadding的样式设置基本相同。可以给四个边设置同一个值,也可以对四个方向进行分别设置,如margin-toppadding-left等,数值可以是像素px,也可以是百分比。

值得注意的一点是,margin可以为负值,而padding不可以。

8,列表样式list-style

经常会用到的就是清除列表的默认样式list-stylenone

list-style-image:url(skin/ico.png); 设置列表前面的小图标,

9,超链接样式

链接的四种状态:

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻

其他样式的设置可以查阅w3schoolcss教程。

以上部分只是我在工作中经常用到的最基本的样式设置,肯定不够全面,在这里只是针对入门级的同学。如果想了解更多还请查阅http://www.w3school.com.cn/css/index.asp

 

版权所有,如需转载请注明出处。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368973.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LVM 逻辑卷 (logica volume manager)

逻辑卷轴管理员 (Logical Volume Manager) 想像一个情况&#xff0c;你在当初规划主机的时候将 /home 只给他 50G &#xff0c;等到使用者众多之后导致这个 filesystem 不够大&#xff0c; 此时你能怎么作&#xff1f; 多数的朋友都是这样&#xff1a;再加一颗新硬盘&#xff0…

sql查询语句for xml path语法

【原地址】 for xml path作用&#xff1a;将多行的查询结果&#xff0c;根据某一些条件合并到一行。 例&#xff1a;现有一张表 执行下面语句 select Department,(SELECT Employee, FROM People b WHERE b.Departmenta.Department For XML Path()) Student from People as a g…

Android Studio打包以及Gradle配置构建

本文转载 郭霖公众号 https://mp.weixin.qq.com/s?__bizMzA5MzI3NjE2MA&mid2650241610&idx1&snb8af73f6c288b6617d9fe0ab3618118d&pass_ticketQK4j37kpmGNlsYcECWMb64HxKHEVJG5mSJubQEQguKI%3D 生成签名文件手动打包 首先生成签名文件&#xff0c;点击 Build…

java重载方法math_Java语言程序设计(十二)Math数学类,方法重载及变量作用域...

1.重载方法上一篇文章用到的max方法只能用于int型数据类型&#xff0c;但是如果需要决定两个浮点数中哪个较大&#xff0c;解决方法是创建另一个方法名相同但参数不同的方法&#xff0c;代码如下&#xff1a;public static double max(double num1, double num2){if(num1>nu…

编码(转)

https://www.zhihu.com/question/28164512 关于编码和乱码的问题&#xff0c;我简单讲一下。 通常问这类问题的人是混淆了若干个不同的概念&#xff0c;并且他们自己也没有意识到自己混淆了这些概念的。 终端显示字符的编码&#xff08;windows下终端是cmd&#xff0c;linux下是…

Spring MVC:测试简介

测试是软件开发中最重要的部分之一。 井井有条的测试有助于使应用程序代码保持良好状态&#xff0c;并且处于工作状态。 有很多不同类型的测试和方法。 在本文中&#xff0c;我想对基于Spring MVC的应用程序进行单元测试进行介绍。 不要希望在这里阅读有关Spring MVC测试的全部…

试验ConcurrentHashmap

我正在研究我最近的一个项目中的内存问题&#xff0c;该项目将数据保留在内存中以进行快速访问&#xff0c;但是应用程序的内存占用量非常大。 该应用程序大量使用CHM&#xff08;即Concurrenthashmap&#xff09; &#xff0c;因此&#xff0c;无需再费脑筋地猜测CHM是问题所…

java线程池任务失败_ThreadPoolExecutor线程池任务执行失败的时候会怎样

1. 任务执行失败时的处理逻辑1.1. WorkerWorker相当于线程池中的线程可以看到&#xff0c;Worker有几个重要的属性&#xff1a;thread &#xff1a; 这是Worker运行的线程&#xff0c;可以理解为一个Worker就是一个线程firstTask &#xff1a; 初始任务&#xff0c;可能为为n…

转:HttpModule与HttpHandler详解

ASP.NET对请求处理的过程&#xff1a;当请求一个*.aspx文件的时候&#xff0c;这个请求会被inetinfo.exe进程截获&#xff0c;它判断文件的后缀&#xff08;aspx&#xff09;之后&#xff0c;将这个请求转交给 ASPNET_ISAPI.dll&#xff0c;ASPNET_ISAPI.dll会通过http管道&…

mysql时间函数总结_MySQL 日期时间函数常用总结

获得当前日期时间(date time)1.1 函数&#xff1a;now()相关函数&#xff1a;current_timestamp()&#xff0c;localtime()&#xff0c;localtimestamp()举例说明&#xff1a;2. 获得当前日期(date)函数&#xff1a;curdate()相关函数&#xff1a;current_date()&#xff0…

Apache CXF – JAX-WS –简单教程

许多Java开发人员认为Web Service实现的任务艰巨-没人能真正责怪他们&#xff0c;尤其是在企业应用程序开发的多年中&#xff0c;这给开发和设计带来了很多复杂性。 对于某些人来说&#xff0c;了解它是构建完整的企业应用程序的下一步-Web服务-是实现面向服务设计的关键方案之…

Java StringBuilder神话被揭穿

神话 用加号运算符连接两个字符串是万恶之源 -匿名Java开发人员 注意 &#xff1a;此处讨论的测试的源代码可以在Github上找到 从大学时代起&#xff0c;我就学会了使用运算符将Java中的String连接视为致命的性能缺陷。 最近&#xff0c;在Backbase R&#xff06;D上进行了一…

java3d创建立方体_Opengl创建几何实体——四棱锥和立方体

//#include #include #include using namespace std;float rtri;float rquad;GLfloat points0[5][3] { {0,1,0},{-1,-1,1},{1,-1,1},{1,-1,-1},{-1,-1,-1} };GLfloat points1[8][3] { {1,1,-1},{-1,1,-1},{-1,1,1},{1,1,1},{1,-1,1},{-1,-1,1},{-1,-1,-1},{1,-1,-1} };//四棱…

WSO2 ESB的一种消息传递方式

正如我之前在WSO2 ESB工作时所发布的那样。 为了更好地理解此ESB&#xff0c;我一直在浏览示例 &#xff08;尚未完成所有示例 &#xff09;。 示例12是关于与ESB的单向消息传递&#xff0c;并使用TCP监视器使其可见。 我之前已经介绍过如何设置类似的工具“ TcpTunnelGUI”&am…

Eclipse-Java代码规范和质量检查插件-Checkstyle

CheckStyle是SourceForge下的一个项目&#xff0c;提供了一个帮助JAVA开发人员遵守某些编码规范的工具。它能够自动化代码规范检查过程&#xff0c;从而使得开发人员从这项重要但枯燥的任务中解脱出来。它可以根据设置好的编码规则来检查代码。比如符合规范的变量命名&#xff…

介绍一款好用 mongodb 可视化工具

最近想自己搭建一个个人博客&#xff0c;所以学了下mongodb&#xff0c;mongodb是用命令行输入的&#xff0c;有些人可能不太习惯&#xff0c;我自己找了下mongodb的一些可视化工具&#xff0c;发现了一款adminmongo很好用&#xff0c;这里介绍给你们用一下。 github地址&#…

用CSS3来代替JS实现交互

【CSS3和JS】 对于CSS了解的同学都知道&#xff0c;CSS的实现是最底层的&#xff0c;在实现方式和性能上都不是&#xff0c;JS这种提供接口的脚本可比的&#xff1b;从CSS3的动画和JS动画对比角度来看两者&#xff0c;会更清晰&#xff1b;而且随着前端框架的使用&#xff0c;…

php 如何宏定义,php – 在html中实现宏定义的方法

也许显而易见,但C预处理器可以完成这项工作.index._html#define _em(a) a #define _image(a, b) #define _list(a, b, c) a \\ b \ c \#define _theTile The Bar Title#include "head._html"_list(foo, bar, bean)This is really _em(great)_image(media/cat.jpg, …

python——函数 11、命名空间

三种名称空间1、内置名称空间&#xff1a; python解释器自带的名字,如&#xff1a;print、sum、max 当解释器启动时就会形成这个空间 2、全局名称空间&#xff1a; 执行python程序时就会产生这个空间 在每行顶端写代码 a10 def foo():print(a) foo() View Code3&…

Hadoop如何工作? HDFS案例研究

Apache Hadoop软件库是一个框架&#xff0c;该框架允许使用简单的编程模型跨计算机集群对大型数据集进行分布式处理。 它旨在从单个服务器扩展到数千台机器&#xff0c;每台机器都提供本地计算和存储。 库本身不用于依靠硬件来提供高可用性&#xff0c;而是被设计用来检测和处…