初识CSS

一,CSS的概念

Cascading Style Sheet  级联样式表

表现HTML或XHTML文件样式的计算机语言

包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

二,CSS的优势

内容与表现分离

网页的表现统一,容易修改

丰富的样式,使得页面布局更加灵活

减少网页的代码量,增加网页的浏览速度,节省网络带宽

运用独立于页面的CSS,有利于网页被搜索引擎收录

三,CSS基本语法结构

选择器 {

        声明1;      

        声明2;  ..... }

1)style标签

<style type="text/css">

h1 {     

        font-size:12px;

        color:#F00; }

</style>

四,HTML中引入CSS样式

1)行内样式

使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>

<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

2)内部样式表

CSS代码写在<head>的<style>标签中

<style>

        h1{color: green; }

</style>

优点 :方便在同页面中修改样式

缺点 :不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底

3)外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表,

有两种方式1.链接式

<head>

  …… <link href="style.css" rel="stylesheet" type="text/css" />

</head>

2.导入式

<head>

         <style type="text/css">

        <!-- @import url("style.css"); -->

        </style>

</head>

行内样式>内部样式表>外部样式表 就近原则

五,CSS基本选择器

1)标签选择器

HTML标签作为标签选择器的名称 <h1>…<h6>、<p>、<img/>

2)类选择器

<标签名 class= "类名称">标签内容</标签名>

.class { font-size:16px;}

3)ID选择器

<标签名 id= "名称">标签内容</标签名>

#id { font-size:16px;}

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次

ID选择器>类选择器>标签选择器

六,CSS的高级选择器

1)层次选择器

2)结构伪类选择器

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点

E F:nth-child(n)在父级里从一个元素开始查找,不分类型

E F:nth-of-type(n)在父级里先看类型,再看位置

3)属性选择器

七,css选择器优先级

不同选择器的优先权重不一样,优先使用样式如下:

1,style        内联样式

2,id选择器

3,类和结构伪类选择器

4,标签选择器

5,通配选择器

继承的样式没有优先级

1)当一个元素由多种选择器的时候,需要将选择器的优先级相加之后进行比较。若是选择器的优先级是一样的,使用靠后的样式。

2)<a>的伪类:        1,:link        2,:hover        3,:visited        4,: active

优先级一样

3)其他常用伪类选择器:     

:enabled 可用的时候触发

:disabled 不可用的时候触发

:not(s) 匹配不含s选择器的元素

:frist-child 父元素的第一个元素

:last-child 父元素的最后一个元素

:only-child 父元素的唯一一个元素

:checked 选中 :checked+伪元素
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值