菜单

从零先河学习前端开发

2019年1月1日 - 注册免费送38元体验金

一、CSS简介

 1.CSS是什么

CSS是Cascading Style
Sheets的简称,普通话称为层叠样式表。特点:实现了突显与社团相分离 

2.css基础语法

css是由选拔符和阐明两大一些组成,阐明由属性和值组成。

语法: 选择符{
        属性:值;
        属性:值;
      }

注: (1)属性和值用冒号连接    (2) 一条讲明截至要添加分号    (3)属性和性质不分先后顺序

3、样式表的创建

1.内联样式(行间样式,行内样式)

语法:<标记 style=”属性:值;”></标记>

eg:  <h1 style=”color:red;”>内联样式</h1> 

2.中间样式(嵌入式样式)

语法: 

<head>
    ...
    <style type="text/css">
        ...此处写CSS样式
    </style>
</head>

注:诚如将style标签放置在head部分

3.表面体制

(a)首先需要创建一个表面css文件(后缀名为.css)

    使用link标签引入css文件

    语法: <link rel=”stylesheet” type=”text/css”
href=”css文件路径”/>

  eg:

<head>
    ...
    <link href="xxxx.css" rel="stylesheet" type="text/css">
</head>

 

   
注:
rel(relationship的简称)用来安装当前文件和引入的文书之间的关联

(b)使用@import的法子引入css文件(import格局现使用较少,老程序员的代码可能会产出这么写法)

    语法: @import “css文件路径”;

  eg:

<head>
    ...
    <style type="text/css">
        @import "My.css"; 此处注意.css文件的路径
    </style>
</head>

  

注:link和@import引入外部体制的区别:

(1)link属于html标签,除了能够引入css文件外仍是可以够引入其他文件,@import属于css范畴,只好引入css文件(老祖宗的分别)

(2)link加载的css文件和页面同时加载,@import引入css文件在页面加载成功后载入(加载顺序的分别)

(3)link是html标签,所有浏览器都帮助,@import低版本浏览器不扶助(浏览器匡助的分别)

(4)link协助js改变DOM样式,@import不援助(对js协助的区别)

 

4、样式表的优先级

在没有出现!important的时候,拔取前后原则(离被安装的因素越近,优先级越高)

内联样式>内部样式>外部体制

当出现!important的时候,它的优先级最高

!important>内联样式>内部样式>外部体制

5、css注释

语法:
/*注脚内容*/(********注意区分CSS注释和html注释,出错难以察觉*******)


 二、css选择器

 

着力选取器


1.id选择器

语法: <标记
id=”***”></标记>

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

  eg: <h1
id=”test”>测试数据</h1>

   #test{color:red;}

注:a)id名是唯一的,不可以出现同名的id    b)
id采纳器的优先级最高    c)
id名要语义化命名(下划线连接法,驼峰命名法)

2.class选拔器(类选拔器)

语法:<标记
class=”***”></标记>

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

eg: <a href=”#”
class=”nav”>音讯资讯</a>

  .nav{color:red;}

注:a)可以给所有同样样式的元素添加同一个class名    b)类选取器的优先级仅次于id选用器

注:还足以接纳类名词列表的点子设置样式

  语法: <a href=”#” class=”nav
news”>信息资讯</a>

      .news{color:pink;}

3.标签选取器(类型选拔符,元素接纳符)

语法:标志名称{属性:属性值;}

eg: a{text-decoration:none;}

注:1)如果想更改某个元素的默认样式时,可以运用项目接纳符;

  2)当统一文档某个元素的来得效果时,可以拔取项目拔取符;

4.通用采纳器(通配符)

语法:*{属性:属性值;}

常用写法: *{margin:0; padding:0;}

注:*匹配html根元素下的拥有标签元素

重组选取器


 5.群组选用器(多元素接纳器)

语法:
选择符1,选择符2,选择符3{属性:属性值;}

eg: .box,.uls,p{color:black;}

6.后裔选用器(包含拔取器)

语法:选择符1
选择符2{属性:属性值;}

eg: 

 div p {color: yellow;}


<div>
    <p>xxxxxx</p>
    <div>
        <p>xxxx</p>
    </div>
</div>

 注:a)选取符1和抉择符2必须是包含与被含有关系

7.子元素拔取器

语法:父标签>字标签{属性:属性值}

eg:

div > p {color: yellow;}

<div>
    <p>xxxxxxx</p>
    <p>xxxxxxx</p>
</div>

注:匹配所有div标签里嵌套的子P标签,之间用>分隔。

8.毗邻元素采用器

语法:采纳器+毗邻拔取器{属性:属性值}

eg:

div + p {color: yellow;}

<div>xxxx</div>
<p>xxxxx</p>

注: 匹配所有紧随div标签之后的同级标签P,之间用+分隔(只好配合一个)。

属性选拔器


7.属性采纳器:

阐明:只有在确定了 !DOCTYPE 时,IE7 和
IE8 才支撑属性采纳器。在 IE6 及更低的本子中,不扶助属性选拔。

 

1.属性选取器

 

  设置有着拥有title属性的价签元素;

<style type="text/css">
[title]
{
color:red;
}
</style>

<h2 title="Hello world">Hello world</h2>
<a title="a1" href="http://xxxx.com.cn">某某某网址</a>

2.属性和值采纳器

下边的事例为 title=”xxx”
的持有因素设置样式:

 

<style type="text/css">
[title=use]
{
border:5px solid blue;
}
</style>


<h1>可以应用样式:</h1>
<img title="use" src="/i/w3school_logo_white.gif" />
<br />
<a title="use" href="http://xxxxx.com.cn">某某某网址</a>
<hr />

<h1>无法应用样式:</h1>
<p title="unuse">Hi!</p>
<a class="W3School" href="http://xxxx.com.cn">某某某网址</a>

3.属性和值采用器 – 六个值

下边的例证为涵盖指定值的 title
属性的拥有因素设置样式。适用于由空格分隔的属性值

<style type="text/css">
[title~=hello]
{
color:red;
} 
</style>

<h1>可以应用样式:</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello  students!</h1>
<hr />

<h1>无法应用样式:</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello students!</p>

下边的事例为带有包含指定值的 lang
属性的享有因素设置样式。适用于由连字符分隔的属性值:

<style type="text/css">
[lang|=en]
{
color:red;
}
</style>

<h1>可以应用样式:</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />

<h1>无法应用样式:</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>

图片 1

 

伪类采纳器


 8.伪类选拔器

语法:
选择符:hover{属性:属性值;}

(1)超链接a的三个情景

a) a:link
链接没有被访问过时的情形(超链接的初叶状态)

b) a:visited 链接被访问之后的状况

c) a:hover 鼠标滑过时的状况

d) a:active 鼠标按下时的场合

记得方法:爱恨原则

L o
V e H
A t e

注:为了简化代码,可以把伪类选用符中相同的宣示指出来放在a选取符中;

eg: a{color:red;}
a:hover{color:green;}

注:除了可以给a添加滑过意况,还足以给此外因素添加滑过情况

eg: .uls li:hover a{color:red;}

当滑过li时,li中的a字体颜色变为藏肉色

(2) before、after

P:before 在每个<p>元素的内容前边插入内容;

P:after 在各种<p>元素的始末之后插入内容。

eg:

 p {
        color: yellow;
    }
    p:before{
        content: "before...";
    }
    p:after{
        content: "after...";
    }

<p>测试数据</p>  

css接纳器权重


 将css拔取器的权重分为多少个阶段:

率先等:内联样式 style=”…”
权重:1000

第二等:id选择器 权重:100

其三等:类采纳器,伪类采纳器,属性采用器
权重:10

第四等:标签接纳器(类型选拔符),伪元素采纳器
权重:1

后人接纳器权重:所有选用器权重之和

群组接纳器权重:选用器自身的权重

掌权重相同时,后写的样式会覆盖先写样式

扩展:

css层叠的定义(含义)

层叠指的是样式的优先级,当暴发顶子时以优先级高的为准

1.
内联样式>内部样式>外部体制(除非选取!important标记 )

2.
id精选器>类选拔器>元素采取器

  1. 权重相同时取前边定义的体裁

 

三、CSS主旨属性

 

1.、字体类属性

 

1.1.字体类型语法:
font-family:
字体1,字体2,字体3;

常用写法:body{font-family:”微软雅黑”,Arial;}

注:a)三个字体之间用逗号分隔

b)
粤语字体要加双引号,英文字体由六个单词组成也要加双引号

c)
浏览器会优先识别字体1,如果找不到,识别字体2,假使都找不到,接纳浏览器默认字体

1.2.字体大小语法: font-size:数值+单位;

eg: font-size:12px;

注:a)浏览器默认字体大小为16px;

  b)字体单位常用的有px,em,rem,pt;

  c) 字体一般设置偶数不安装奇数

  d) font-size:medium; 等价于
font-size:16px;

1.3.字体加粗语法:font-weight:normal(常规字体)|
bold(加粗)|bolder(加粗)| 100-900;

注:100-500为常规字体,600-900为加粗字体

eg: h1{font-weight:normal;}

1.4.字体倾斜语法:font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);

eg: p{font-style:italic;}

1.5.小型大写字母字体语法:
font-variant:
normal(常规字体)|small-caps(小型大写字母字体);

注:只对英文起效果

1.6.font复合写日语法: font:style weight size
family;

eg: font:oblique bold 12px “宋体”;

注:a)font-size和font-family不可以交换位置

  b)
font-size和font-family必须放在最终,不得以和其它性能互换地方

  eg: font:12px/1.5 “微软雅黑”;

  上述写法代表字体大小为12px,行高为字体大小的1.5倍即18px,字体类型为微软雅黑;

1.7.字体颜色语法:color:颜色值;

注:颜色值的二种写法:

a)十六进制写法 #000(黑色) #fff(白色)
#f00(绿色) (项目支付中常用的写法)

b) rgb模式 rgb(0,0,0) 黑色
rgb(255,255,255) 白色 rgb(255,0,0) 红色

c) 颜色单词 red(粉色) green(藏蓝色)
blue(黄色) yellow(绿色) black(肉色) white(白色) gray(褐色)

eg: color:#000; color:rgb(0,0,0);
color:black;

 

2、文本类属性

 

2.1.文本水平对齐格局语法:text-align:left(左对齐)|center(居中对齐)|right(右对齐)|justify(两端对齐);

注:a)justify两端对齐只对英文起效果

b)
设置文本内容在父元素中的水平对齐模式,text-align给父元素加

2.2.行高语法: line-height:数值+单位;

注:a)当单行文本的行高等于容器高时,可以实现单行文本在容器中垂直居中

  b) line-height不容许设置负值

  c)当line-height只写数值不加单位时,代表倍行高,即按照字体大小的倍数设置行高

2.3.文本修饰语法:text-decoration:none|underline(下划线)|overline(上划线)|line-through(删除线);

eg:a{text-decoration:none;}
去掉超链接下划线

2.4.首行缩进语法:text-indent:数值+单位;

eg: text-indent:32px;

注:text-indent设置正值向后缩进,负值向前缩进

2.5.字符间距语法:
letter-spacing:
数值+单位;

注:重要用于设置字与字,字母与字母之间的间距

letter-spacing允许设置负值

2.6.词距离语法: word-spacing:数值+单位;

注:重要用以设置英文单词和单词之间的区间

允许设置负值

2.7.操纵文件大小写语法:text-transform:none(默认值)|capitalize(首字母大写)|uppercase(全体大写)|lowercase(整体大写);

注:只对英文起效果

2.8.长单词换行语法:word-wrap:normal(默认值)|break-word(长单词换行);

注:在长单词或URL地址内部举行换行

2.9.强制在一行显示语法:white-space:normal(默认值)|nowrap(不换行,强制在一行显示);

2.10.文本流控制语法:layout-flow:horizontal(从左到右)/vertical-ideographic(从上到下);

2.11.垂直对齐模式语法:vertical-align:baseline(基线对齐)|top(顶部对齐)|middle(中部对齐)|bottom(底部对齐);

注:vertical-align紧要使用在六个地点:

    a)用来安装表格单元格内容的对齐模式

    b)
设置行内元素的基线绝对于该因素所在行的基线的垂直对齐

 

3、列表类属性

 

3.1.列表符号样式语法:
list-style-type:
disc(实心圆)|circle(空心圆)|square(方块)|decimal(数字)|none(去掉列表符号样式);

3.2.施用图片作为列表符号语法:list-style-image:url(图片路径);

3.3.列表符号地方语法:list-style-position:outside(外边)|inside(里边);

3.4.去掉列表符号样式语法:list-style:none;

常用写法: ol,ul{list-style:none;}

li{list-style:none;}

 

4、背景类属性

 

4.1.背景点语法:background-color:颜色值;

eg: background-color:blue;

4.2.背景图片语法:background-image:url(图片路径);

eg: background-image:url(1.jpg);

4.3.背景平铺属性语法:background-repeat:no-repeat(不平铺)|repeat(平铺)|repeat-x(横向平铺)|repeat-y(纵向平铺);

4.4.背景图地点语法:background-position:left|center|right|数值
top|center|bottom|数值;

eg: background-position:right
bottom;

注:a)background-position的属性值中,第一个值代表水平方向,第二个值代表垂直方向

  b)当设置数值时,水平方向向右为正,向左为负,垂直方向向下为正,向上为负

  c)
当水平方向和垂直方向都为center,可以大概第二个值

4.5.background属性复合写法(简写形式)语法:
background:
背景观背景图 背景平铺属性 背景图地方;

eg: background:#f00 url(1.jpg) no-repeat
right bottom;

4.6.背景图的突显标准

a)当容器尺寸等于背景图尺寸时,背景图恰好呈现在容器中

b)
当背景图尺寸小于容器尺寸时,背景图默认平铺,直至铺满所有容器

c)
当背景图尺寸大于容器尺寸时,只可以突显容器范围之内的背景图

4.7.背景图固定语法: background-attachment:scroll(滚动)|fixed(固定);

注:紧要用来设置当出现滚动条时,背景图固定不跟随滚动条滚动

4.8.网页上常见的两种图片格式

a)jpg格式:有损压缩格式,适用于颜色充分的图像

b)
gif格式:有损压缩格式,协助动画,补助透明

c) png格式:有损压缩格式,协理透明

 

5、浮动属性

**浮动属性语法:
float:**none(默认值,不浮动)|left(左浮动)|right(右浮动);

 

6、清除浮动语法:clear:none|left|right|both;

none:默认值,不消除任何变化

left: 清除左浮动

right: 清除右浮动

both:清除左浮动和右浮动

注:前边有元素存在左浮动或右浮动,影响到该因素的正常化显示,给受影响的元素添加clear属性

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图