菜单

从零开始学习前端开发 — 2、CSS基础

2018年9月12日 - 注册免费送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>

注册免费送38元体验金 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地图