澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

【澳门皇冠844网站】20、CSS,20css

20、CSS,20css

CSS

层叠样式表(Cascading Style Sheets)。

用于定义显示HTML样式。

DIV和SPAN

div是块级元素。

span是行级元素。

将一些页面中的内容包裹起来统一设置样式。

CSS语法

特征:值;

CSS嵌入页面的三种方式

行内样式

<div style="color:red;">这是红色的字。</div>

页内样式

<style type="text/css">
  Selector{property:value;}
</div>

引入外部样式表文件

<!-- 方式1 -->
<link rel="stylesheet" type="text/css" href="css/style.css" >

<!-- 方式2 -->
<style type="text/css">
@import url(css/style.css);
</style>

优先级:就近原则,行内优先与页内,优先于外部文件。

CSS注释

/* 这里是注释部分 */

选择器

类选择器

  .类名 { 样式属性:值; }

<style>
    p.red{color:red} 
</style>

<!-- 使用时 -->
<p class="red">类选择器</p>

ID选择器

  #id名 { 样式属性:值; }

<style>
    #id{color:red}
</style>

<!-- 使用时 -->
 <p id="id">ID选择器</p>

标签选择器

  标签名  { 样式属性:值; }

<style>
    body{color:red}
</style>

<body>选择器</body>

分组选择器

  属性1,属性2,属性3 { 样式属性:值; }

<style>
    h1,h2,h3,h5,p{color:#000;}
</style>

<h1>选择器</h1>

子代选择器

<style>
  ul>li{list-style:none}
</style>

<ul><li>1</li><li>2</li></ul>

后台选择器

<style>
  ul a{list-style:none}
</style>

<ul><li><a href=''>123</a></li><li>2</li></ul>

通用选择器

<style>
  *{color:#000;}
</style>

<h1>选择器</h1>

伪类选择符

:link默认样式
:visited点击过样式
:active点击时样式

伪元素选择符

:first-letter首字母
:first-line首行

选择器优先级:!important > #id >.class > selector

单位和值

继承:就是被包在内部的标签享有外部标签的样式,但border、margin、padding、background不会被继承。

<p style='color:red'>继承<em>斜体</em></p>   显示为: 继承斜体  

em标继承了p标签的红色

display属性:none(隐藏)、block(块显示)、inline(行显示)、list-item(列表显示)。

color属性:前景颜色 可以rgb(100%,100%,100%); 、rgb(255,255,255); 、十六进制值 #ffffff;、短十六进制 #fff;

绝对长度单位:in英寸、cm厘米、mm毫米、pt磅。

相对长度单位:em文字本身大小、ex 1ex=0.5em ex的一半、px像素。

百分比值:%百分号,150%相当于1.5em

背景

background-color:背景颜色,transparent 透明。

background-image:url() 背景图片

background-repeat:平铺 repeat-x 横向、repeat-y 纵向、 no-repeat 不平铺

background-position:位置 top、bottom、left、right、center

background-attachment:背景固定 fixed固定 不随屏幕滚动

background:[color | image | position | repeat | attachment] 简写

文本

text-indent:文本缩进,常用首段缩进2em

text-align:对齐方式 left(左)、right(右)、center(居中)、justify(两端)

white-space:处理空白 normal(只显示一个空白)、pre(不忽略空白)、nowrap(不换行)

line-height:行间距,处理文档行与行之间的距离

vertical-align:纵向对齐 baseline(基线对齐)、sub(下标对齐)、super(上标对齐)、bottom(底部对齐)、text-bootom(文本底端)、top(顶端对齐)、middle(中间对齐)

word-spacing: 文字间隔 字体

font-famliy:字体 "微软雅黑"

font-weight:加粗 bold(粗)、ligter(100~900)

font-size:大小 px、em、%

font-style:样式 italic(倾斜)、oblique(斜体)

font-variant:变形 normal(默认)、small-caps(小型大写字母)

font:[ font-famliy | font-weight | font-style | font-size | font-variant | line-height]

列表

list-style-type:列表样式 disc(实心圆点)、circle(空心圆点)、square(放块)、none(无)

list-style-image:列表图像 使用图片作为符号

list-style-position:列表位置 inside、outside

list-style:[ type | image | position ]

框与边框

澳门皇冠844网站 1

width:宽度 px、%、auto

height:高度 px、%、auto

padding:外边距

padding-top、padding-right、padding-bottom、padding-left 单侧边距

margin:边界

margin-top、margin-right、margin-bottom、padding-left 单侧边界

这俩 简写 padding|margin [top|right|bottom|left] 依次 上、右、下、左

p{margin:1px 2px} 相当于 p{margin:1px 2px 1px 2px}

border:边框

border-style:边框样式 none(无)、dashed(虚线)、solid(实线)、dotted、double、groove、ridge、inset、outset

border-width:边框宽度

border-color:边框颜色

以上三个属性可以单侧设置,如:border-top-style:none,border-right-width:2px,border-left-color:red.

border:[ width | style | color ] border:1px solid #fff;

浮动****定位**

float:浮动 left(左浮动)、right(右浮动)、nont(无)

clear:清楚 left(清楚左浮动)、right(清楚右浮动)、both(清楚全部)、none(不清楚)

使用浮动时,需要注意宽度,如果宽度不能在当前页面所包容,则会换行。

使用完浮动后记得清除浮动,否则下面的元素也跟着浮动。

position:定位模式 static(默认)、relative(相对)、absolute(绝对)、fixed(绝对)、inherit(继承)

top,right,left,bottom 定位位置。

使用定位时,可以在某个div指定定位容器 relative ,然后在这个容器中 所使用的定位是相对与这个容器的,而不是相对于浏览器。如bottom 1px 则在div的底部而不是浏览器底部。

overflow:溢出处理 visible(显示默认)、hidden(隐藏)、scoll(滚动条) 当超过指定高度或宽度时的处理

z-index:显示级别 数字越大越高,避免被遮盖,或者故意遮盖某块。

 

CSS 层叠样式表(Cascading Style Sheets)。 用于定义显示HTML样式。 DIV和SPAN div是块级元素。 span是行级元素。 将一些页面中的内容...

DIV和SPAN

Css01

一、CSS简介

a)      Cascading Style Sheets 层叠样式表(级联样式表)

b)      是一个文本文件,不需要编译 由浏览器直接执行

c)       作用是 定义网页外观 如 字体,背景,等。。。

d)      可以配合JavaScript做出绚丽的效果

二、CSS 特点

a)      精确的定位

准确的控制页面的任何元素

b)      精细的控制

可以做到像素级别的调整

c)       样式与内容分离

便于维护,便于重用

三、使用方法

  1. 内联

 写在标签内的style属性中的叫做内联

例如: <p style="color:yellow">祖传牛皮癣,专治老中医</p>

 

  1. 内嵌

写在head标签的style标签中的属性叫做内嵌

例如:

<style>

                  p{color:red;}

</style>

  1. 外联

通过外部引入的方式使用

例如:<link rel=”stylesheet” type=”text/css” href=”./css.css”/>

四、基础语法

1.CSS 格式

选择器

负责圈定范围,要修改的元素集合

声明

  由属性名和属性值组成,中间用冒号连接(属性名:属性值),用于设定具体样式

 

CSS组成

由选择器和一个或多个声明组成,多个声明之间用分号

选择器{属性名:属性值;属性名:属性值;}

  2.CSS 注释

Html 注释  <!-- -->

样式表里面的注释就一种

/* 这里面是注释内容 */

注释不能嵌套

3.单位

a)      长度单位

  1. em 倍数 
  2. px: pixel 像素 屏幕上显示的最小单位 用于网页设计。
  3. PPI(DPI)每英寸的像素点 是一个率 表示了 清晰度 精度
  4. Pt 是一个标准的长度单位 1pt=1/72英寸 用于印刷行业

公式: px = pt*DPI/72;

  1. cm/mm   厘米/毫米

 

b)      颜色单位

  1. 英文名: red green blue 。。。。。
  2. 十六进制rgb #000000 - #ffffff
  3. Rgb

数字 (0-255) rgb(255,0,0)

百分比(0-100%) rgb(100%,0%,0%)

c)       URL地址

  1. 不用引号 url(test.jpg)
  2. 绝对路径 url()
  3. 用单引号 url(‘./test.jpg’)
  4. 用双引号url(“./test.jpg”)

 

  五、选择器

1.HTML选择器

就是使用html元素作为选择器

例如: p{color:red}

2.ID选择器

使用id值作为选择器

使用方式: #id值{声明}

例如:#duang{color:red;}

3.Class选择器

 使用class值作为选择器

 使用方式:.class值{声明}

 例如:.butingke{color:red}

注意:不要轻易使用id选择器 请多使用class选择器进行选择!

4.关联选择器

通过一级一级的向下查找得到唯一使用选择器

每个选择器之间使用空格隔开

例如: ul #zhangsan b{color:red}

5.组合选择器

em标继承了p标签的红色

Css01

一、CSS简介

a)      Cascading Style Sheets 层叠样式表(级联样式表)

b)      是一个文本文件,不需要编译 由浏览器直接执行

c)       作用是 定义网页外观 如 字体,背景,等。。。

d)      可以配合JavaScript做出绚丽的效果

二、CSS 特点

a)      精确的定位

准确的控制页面的任何元素

b)      精细的控制

可以做到像素级别的调整

c)       样式与内容分离

便于维护,便于重用

三、使用方法

  1. 内联

 写在标签内的style属性中的叫做内联

例如: <p style="color:yellow">祖传牛皮癣,专治老中医</p>

 

  1. 内嵌

写在head标签的style标签中的属性叫做内嵌

例如:

<style>

                  p{color:red;}

</style>

  1. 外联

通过外部引入的方式使用

例如:<link rel=”stylesheet” type=”text/css” href=”./css.css”/>

四、基础语法

1.CSS 格式

选择器

负责圈定范围,要修改的元素集合

声明

  由属性名和属性值组成,中间用冒号连接(属性名:属性值),用于设定具体样式

 

CSS组成

由选择器和一个或多个声明组成,多个声明之间用分号

选择器{属性名:属性值;属性名:属性值;}

  2.CSS 注释

Html 注释  <!-- -->

样式表里面的注释就一种

/* 这里面是注释内容 */

注释不能嵌套

3.单位

a)      长度单位

  1. em 倍数 
  2. px: pixel 像素 屏幕上显示的最小单位 用于网页设计。
  3. PPI(DPI)每英寸的像素点 是一个率 表示了 清晰度 精度
  4. Pt 是一个标准的长度单位 1pt=1/72英寸 用于印刷行业

公式: px = pt*DPI/72;

  1. cm/mm   厘米/毫米

 

b)      颜色单位

  1. 英文名: red green blue 。。。。。
  2. 十六进制rgb #000000 - #ffffff
  3. Rgb

数字 (0-255) rgb(255,0,0)

百分比(0-100%) rgb(100%,0%,0%)

c)       URL地址

  1. 不用引号 url(test.jpg)
  2. 绝对路径 url()
  3. 用单引号 url(‘./test.jpg’)
  4. 用双引号url(“./test.jpg”)

 

  五、选择器

1.HTML选择器

就是使用html元素作为选择器

例如: p{color:red}

2.ID选择器

使用id值作为选择器

使用方式: #id值{声明}

例如:#duang{color:red;}

3.Class选择器

 使用class值作为选择器

 使用方式:.class值{声明}

 例如:.butingke{color:red}

注意:不要轻易使用id选择器 请多使用class选择器进行选择!

4.关联选择器

通过一级一级的向下查找得到唯一使用选择器

每个选择器之间使用空格隔开

例如: ul #zhangsan b{color:red}

5.组合选择器

多个选择器组合在一起中间使用逗号分隔

例如:p,.pangzi{color:red}

 

6.伪元素选择器

a)      :link 未访问链接

b)      :hover 鼠标移动到链接上时

c)       :active 鼠标选中的链接

d)      :visited 已访问的链接

只有a标签有上面四种伪元素内容

除a标签以外的文本标签现在只有两种伪元素内容分别为(hover,active)

   选择器的优先级: 关联选择器>id选择器>class选择器>html选择器

多个选择器组合在一起中间使用逗号分隔

例如:p,.pangzi{color:red}

 

6.伪元素选择器

a)      :link 未访问链接

b)      :hover 鼠标移动到链接上时

c)       :active 鼠标选中的链接

d)      :visited 已访问的链接

只有a标签有上面四种伪元素内容

除a标签以外的文本标签现在只有两种伪元素内容分别为(hover,active)

   选择器的优先级: 关联选择器>id选择器>class选择器>html选择器

选择器优先级:!important > #id >.class > selector

Css01

一、CSS简介

a)      Cascading Style Sheets 层叠样式表(级联样式表)

b)      是一个文本文件,不需要编译 由浏览器直接执行

c)       作用是 定义网页外观 如 字体,背景,等。。。

d)      可以配合JavaScript做出绚丽的效果

二、CSS 特点

a)      精确的定位

准确的控制页面的任何元素

b)      精细的控制

可以做到像素级别的调整

c)       样式与内容分离

便于维护,便于重用

三、使用方法

  1. 内联

 写在标签内的style属性中的叫做内联

例如: <p style="color:yellow">祖传牛皮癣,专治老中医</p>

 

  1. 内嵌

写在head标签的style标签中的属性叫做内嵌

例如:

<style>

                  p{color:red;}

</style>

  1. 外联

通过外部引入的方式使用

例如:<link rel=”stylesheet” type=”text/css” href=”./css.css”/>

四、基础语法

1.CSS 格式

选择器

负责圈定范围,要修改的元素集合

声明

  由属性名和属性值组成,中间用冒号连接(属性名:属性值),用于设定具体样式

 

CSS组成

由选择器和一个或多个声明组成,多个声明之间用分号

选择器{属性名:属性值;属性名:属性值;}

  2.CSS 注释

Html 注释  <!-- -->

样式表里面的注释就一种

/* 这里面是注释内容 */

注释不能嵌套

3.单位

a)      长度单位

  1. em 倍数 
  2. px: pixel 像素 屏幕上显示的最小单位 用于网页设计。
  3. PPI(DPI)每英寸的像素点 是一个率 表示了 清晰度 精度
  4. Pt 是一个标准的长度单位 1pt=1/72英寸 用于印刷行业

公式: px = pt*DPI/72;

  1. cm/mm   厘米/毫米

 

b)      颜色单位

  1. 英文名: red green blue 。。。。。
  2. 十六进制rgb #000000 - #ffffff
  3. Rgb

数字 (0-255) rgb(255,0,0)

百分比(0-100%) rgb(100%,0%,0%)

c)       URL地址

  1. 不用引号 url(test.jpg)
  2. 绝对路径 url()
  3. 用单引号 url(‘./test.jpg’)
  4. 用双引号url(“./test.jpg”)

 

  五、选择器

1.HTML选择器

就是使用html元素作为选择器

例如: p{color:red}

2.ID选择器

使用id值作为选择器

使用方式: #id值{声明}

例如:#duang{color:red;}

3.Class选择器

 使用class值作为选择器

 使用方式:.class值{声明}

 例如:.butingke{color:red}

注意:不要轻易使用id选择器 请多使用class选择器进行选择!

4.关联选择器

通过一级一级的向下查找得到唯一使用选择器

每个选择器之间使用空格隔开

例如: ul #zhangsan b{color:red}

5.组合选择器

多个选择器组合在一起中间使用逗号分隔

例如:p,.pangzi{color:red}

 

6.伪元素选择器

a)      :link 未访问链接

b)      :hover 鼠标移动到链接上时

c)       :active 鼠标选中的链接

d)      :visited 已访问的链接

只有a标签有上面四种伪元素内容

除a标签以外的文本标签现在只有两种伪元素内容分别为(hover,active)

   选择器的优先级: 关联选择器>id选择器>class选择器>html选择器

span是行级元素。

<div style="color:red;">这是红色的字。</div>

后台选择器

<style>
    p.red{color:red} 
</style>

<!-- 使用时 -->
<p class="red">类选择器</p>

list-style:[ type | image | position ]

继承:就是被包在内部的标签享有外部标签的样式,但border、margin、padding、background不会被继承。

color属性:前景颜色 可以rgb(100%,100%,100%); 、rgb(255,255,255); 、十六进制值 #ffffff;、短十六进制 #fff;

div是块级元素。

引入外部样式表文件

优先级:就近原则,行内优先与页内,优先于外部文件。

伪元素选择符

百分比值:%百分号,150%相当于1.5em

行内样式

相对长度单位:em文字本身大小、ex 1ex=0.5em ex的一半、px像素。

页内样式

特征:值;

  .类名 { 样式属性:值; }

list-style-image:列表图像 使用图片作为符号

font-famliy:字体 "微软雅黑"

font-weight:加粗 bold(粗)、ligter(100~900)

font-size:大小 px、em、%

font-style:样式 italic(倾斜)、oblique(斜体)

font-variant:变形 normal(默认)、small-caps(小型大写字母)

font:[ font-famliy | font-weight | font-style | font-size | font-variant | line-height]
<style>
  ul a{list-style:none}
</style>

<ul><li><a href=''>123</a></li><li>2</li></ul>

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:【澳门皇冠844网站】20、CSS,20css