Day02 - CSS

HTML的布局方式大致分为两种：

 1) 表格标签 - table2) div + css

块级标签
典型的就是<div>< /div>,块级标签独占一行，同理，<h>标签，<li>标签也是块级标签；div标签独自不能够实现复杂的效果，必须结合css样式进行渲染。如果把div标签用id或者class来标记<div>,那么该标签的作用会显得更加有效。

<div>< /div>标签属性：
align：表示div中内容的对齐方式

行级标签
<span>< /span>，不独占一行；

  <body><div>这是一个块</div><div>这是一个块</div><span>这是一个行级</span><span>这是一个行级</span></body>

* css：层叠样式表、

CSS：Cascading Style Sheets

定义：
CSS通常称为CSS样式或者层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片外形（宽高和边距等）、以及版面布局等其它样式。

名词解释：
* 样式表：给HTML标签添加需要显示的效果
* 层叠：使用不同的添加方式，给同一个HTML标签添加样式，最后所有样式都叠加在一起，共同作用于该标签。

作用：
1）设置html样式
2）复用已经写过的样式代码，当两个css修饰同一个标签的时候，发生冲突的属性，以最后一个修饰该标签的css为准，后加载为准；

css的三种引用方式：
行内样式
内部样式
外部样式

**行内样式：
css内嵌在html的标签里面
书写规范： style=”属性名 : 属性值 ; 属性名 : 属性值；”

<div style="font-size: 12px; color: deepskyblue ;">这是一个块
</div>
<span style="color: red; font-family: 'arial black'; font-size: 20px;">这是一个行级
</span>

 style其实是html中标签div的属性，而双引号中的color，font-size才是css里面的属性。在双引号中，用分号；分隔不同的属性。字体大小font-size的px不能够省略，css中，像素单位是不能够省略的，只有在html中的单位才能够省略。

优点：
优先级最高
可读性强

缺点：
毫无复用性；

**内部样式也叫内嵌样式
在该html文件的head标签里添加style标签来改变样式。只对其当前所在的html页面有效，可以对多处设置图同一样式；
style当中注释要写成/**/
书写规范：

     <style>选择器 {属性名:属性值;color: red;font-size: 40px;}</style>

内部样式写在哪里都可以，但是建议写在<head></head>标签中，写在<title>下方
语法：

   <style>选择器{}</sytle><style type="text/css">div{color:green;font-size:200px;}</style>

优点：
有一定的复用性，复用性较高，在该html文件内可以复用；

缺点：
可读性不强，书写不方便；

外部样式：也叫链入式

在外部定义一个css文件，以.css结尾。然后再需要用到该样式的html中引入css
同一个css样式表可以被不同的html页面链接使用，同时，一个html页面也可以通过多个<link />标记链接多个css样式表使用。

步骤1）新建css文件，在css文件中：

            选择器{属性名 : 属性值;color: red;font-size: 40px;}

步骤2）使用link标签将css文件引入进来

<link rel="stylesheet" href="../css/demo1.css" type="test/css" />

 rel表示关系，stylesheet表示样式表，**不能够缺少**，缺少则设置不成功href表示连接的css样式文件type=“test/css”  固定值，表示css类型rel=“stylesheet” 固定值，表示样式表；

优缺点
* 优点：可读性较好，可复用性非常强
* 缺点：效率略低。客户端在访问html页面的时候，要从服务器请求对应的css文件。用户加载的时候速度稍慢

<link>标签
link标签的属性：
* href : 引入的css文件的路径
* rel : relation的缩写，表示引入的文件和该HTML的关系。必须要写
* type : 引入的文件类型

css三种引用方式的优先级：
行内样式 > 内部样式和外部样式
内部样式和外部样式的优先级谁后加载，谁的优先级就高。

CSS的选择器

“选择器”用于指定css样式的html对象（如果html的标签名字，这里是直接使用标签名字而不需要加上任何的尖括号，例如直接使用div），花括号内是对对象设置具体的格式，属性和属性值以键值对的方式进行出现的，使用英文冒号：分隔，多个属性之间使用英文分号进行分隔；

注意几点：
1）CSS样式选择器严格区分大小写，但是属性和属性值不区分大小写；
2）多个属性之间必须用英文状态下的分号进行分隔，但是最后一个属性后面的分号可以省略；为了增加新样式，最好将最后一个属性后面的分号也保留。
3）如果属性的值由多个单词组成且中间包含空格，就必须为这个属性值加上英文状态下的引号。
p{ font-family ： “Times New Roman”}

关于css中的空格：
1）在css代码中，空格是不被解析的，花括号以及分号前后的空格可有可无，因此可以使用空格键，Tab键，回车键对样式代码进行排版，即所谓的格式化css代码，这样可以提高代码的可读性。
2）需要注意的是，在属性的值和单位之间是不允许出现空格的，否则浏览器解析的时候会出现错误。例如下方所示就是不正确的。

CSS的基本选择器 - 三种

1）元素选择器/标签选择器
标签例如div
* 语法：

     标签名{属性名：属性值；}

 最大的优点就是能够快速地为页面中同类型的标记统一样式；但是这也是他的缺点，不能够设计差异化的样式。

2）ID选择器
id,给独特的某个标签设置样式，一般不用这种方式，因为id原则上是唯一的。不是给css使用的，而是给js使用的。id在命名的时候不能够以数字开头，否则会无效
元素的id值是唯一的，这种方法只能够对应文档中某一个具体的元素；
使用#号进行引用。
* 语法：

      #id{属性名：属性值；}

3）类选择器
给具有相同类名class的一类标签设置样式，用的最多
* 语法：

      .类名{属性名：属性值；}

例：

  <style>.test{color: royalblue;}</style><div class="test">这是一个块</div>

CSS的其他选择器

1）层级选择器
* 语法：

   父选择器 子选择器 孙子选择器{属性名：属性值；}.div2 div .sp1{}

应用场景：一层层往下找到某一个或者一类标签。

2）属性选择器

用于设置同一个属性值type的一组标签
注意：标签后面跟中括号 [ ],type后面的值跟单引号 ‘ ’；
* 语法：

   标签选择器[属性名='属性值']{css的样式}input[ type = 'text']{background-color:green;}

3）伪元素选择器
<a href="">< /a>标签的状态选择器

 a标签设置点击前颜色，点击后的颜色，a标签的四种状态，link默认状态，hover鼠标移上去，active点击状态，visited点击过后的状态

* link 对象在未被访问前的样式。
* hover 用于当用户把鼠标移动到元素上面时的效果；
* active 用于用户点击元素那一下的效果
* visited 用于用户点击过后的效果

注意：标签名 a 后面跟冒号：
* 语法：

  a:link{css样式}a : link {color:bule ;}a : hover{color:green;}a : active{color:red;}a: visited{color: yellow;}

CSS的属性

1）文字和文本属性
* color：文本颜色
* font-size：字体大小
* font-family：字体系列，类似HTML的<font>< /font>中的face属性，但是可以指定多个字体样式
font-family表示使用的字体系列，多个字体用逗号分隔，例如“字体1，字体2，字体3”此时优先使用的是字体1，如果字体1系统不存在，再使用字体2，以此类推。
* font-weight：bold，字体加粗
*text-align:文字水平对齐方式。
* text-decoration：下划线等
*text-decoration： underline 下划线
* text-decoration： none 没有线，要写在伪类选择器中才有用

a:link{color: deepskyblue;text-decoration:none;
}

text-decoration： line-through表示一条线从中间滑过
text-decoration： overline-文字上方的线

2）背景属性
* background-color：背景色
* background-image：背景图片 background-image：url（）；（引用有三种，src，href，url，其中url只用于css中 ）需要设置在body中
* background-repeat：平铺方式；重复背景图显示。也就是背景图片的平铺方式。默认状态就是横向纵向都平铺；取值还有repeat-x,repeat-y，no-repeat横向、纵向、不平铺
* repeat:横向纵向都平铺
* repeat-x:横向平铺
* repeat-y:纵向平铺
* no-repeat:不平铺
* background : 颜色图片平铺方式（顺序随便）；开发中的综合写法

       background: red url() no-repeat;

3）列表属性
* list-style-type : 列表前面使用默认的图标
* list-style-image : url() ; 列表前面使用自定义的小图片 icon

4）边框和尺寸属性

边框属性

border-width:边框的宽度
border-style:边框的类型
border-color:边框的颜色
border-width:10px;
border-color: red ;
border-style: solid; 实线
**border: 宽度颜色样式（顺序随便）开发中的综合写法
边框变圆角：**

尺寸的属性

width
height

5）显示属性
* display ：display,取值有三种，none，inline，block，none为不显示，block（块级标签显示）为每个div独占一行，inline行级标签显示；
* block:显示为块级元素
* inline：显示为行级元素
* none：不显示

选择器{display：inline；
}

6）浮动属性
脱离该HTML页面。
float：left
如果div中有内容就会环绕，而不会盖住。
清除浮动：clear：both；清除浮动带来的影响。
* float:浮动
* left
* right
* none

clear：清除浮动
- left
- right
- both

CSS的盒子模型也叫css框模型

一般为两个盒子
* padding
* 内边距：盒子边框距离盒子内部的元素的距离

margin
- 外边距：就是盒子的边框距离外部框架的边框或者外部盒子边框的距离。
border
- 盒子边框
- border-width
- border-style
- border-color
- 实际开发中的简写border:width style color

例子：

Day02 - CSS相关推荐

前端 day02 CSS
目录 CSS 1.代码的三种引入方式 2.CSS选择器 3.常用样式盒子模型 1.内边距 2.外边距 CSS 1.代码的三种引入方式 (1)内联样式 (2)内部样式 (3)外部样式 /*外部的css ...
Web前端基础---CSS样式--盒子模型--浮动与定位
Day02 CSS样式 DIV和CSS DIV是层叠样式表中的定位技术,全称DIVision,即为划分.有时可以称其为图层. DIV元素是用来为HTML文档内大块(block-level)的内容提供结 ...
HTML+CSS前端学习
HTML 相关示例及代码:D:\XML HTML+CSS+JS\day01 HTML和day02 HTML CSS 1.什么是HTML 是用来描述网页的一种语言 ! (超文本标记语言) HTML使用的 ...
前端学习之day02-CSS基础
上午笔记 Day02 css属性组成和作用:预习1.css属性和属性值的定义 2.css文本属性 font-size9pt = 12px; 1em=16px 0.75em=12px=9ptfont-w ...
HTML Table标签 Div属性 a标签
<!DOCTYPE HTML> 声明:表示这是一个html文件,满足html5规范,这句话必须写到第一行 1.注释:在代码旁进行说明语法: 2.网页:浏览网络 ...
从零开始学前端：HTML的一些文本格式化标签、快捷键、和特殊符号 --- 今天你学习了吗？（CSS：Day02）
从零开始学前端:程序猿小白也可以完全掌握!- 今天你学习了吗?(CSS) 复习:从零开始学前端: HTML框架和VS Code安装 - 今天你学习了吗?(CSS:Day01) 文章目录从零开始学前端 ...
CSS Day02学习
目录 1美化网页元素 span标签字体样式文本样式 1.颜色 2.文本对齐方式 3首行缩进 4.行高 (单行文字上下居中 :line-height=height) 5.装饰 6.文本图 ...
【转型JAVA CSS 基础day02】
文章目录一点感悟一.CSS 学习资料二.学习计划三.学习感悟第8章 CSS3选择器第9章 CSS3的继承,优先级和重要性第10章 CSS3的字体样式设置字体状态 font-style: ...
css入门学习day02笔记
各种选择器的详解一.标签选择器如下代码: <!DOCTYPE html> <html lang="en"> <head><meta c ...

Day02 - CSS

Day02 - CSS

* css：层叠样式表、

CSS的选择器

CSS的基本选择器 - 三种

CSS的其他选择器

CSS的属性

边框属性

尺寸的属性

CSS的盒子模型也叫css框模型

Day02 - CSS相关推荐

最新文章

热门文章

Day02 - CSS

Day02 - CSS

* css：层叠样式表、

CSS的选择器

CSS的基本选择器 - 三种

CSS的其他选择器

CSS的属性

边框属性

尺寸的属性

CSS的盒子模型 也叫css框模型

Day02 - CSS相关推荐

最新文章

热门文章

CSS的盒子模型也叫css框模型