首页 > > 网页制作 > css >

前端基础CSS篇之一

2020-03-28 16:05:11来源：博客园阅读 ()

前端基础CSS篇之一

OXO1 写在前面

1.HTML和CSS的对比

(1)HTML只关注语义和结构，主要是对网页元素的整理和分类。
(2)CSS的主要使用场景就是美化页面，布局页面。
(3)CSS和HTML搭配使用，实现网页结构，表现分离。

2.CSS概述

（1）概念

CSS是叠层样式表（Cascading Style Sheets)也称为CSS样式表或级联样式表。
也是一种标记语言。

（2)作用

CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形（宽高，边框样式，边距等）以及版面布局和外观显示样式。

(3)CSS语法

CSS主要是由选择器和一条或者多条申明组成。

选择器  {
      属性1:  值1； 
      属性2:  值2；
      属性n:  值n；
       }

demo:

p  {
    color:  red;
    font-size: 12px;
   }

注：
选择器：指定修改样式的目标
声明：要改成的样式

（4）CSS注释：

  /* 我是被注释掉的内容 */

OXO2 选择器的分类

一. 基础选择器

1.标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器，按照标签分类，为页面中某一类型的标签，指定统一的CSS样式。
语法：

标签名  {
    属性1：  值1；
    属性2：  值2；
    ....
    }

demo :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css标签选择器</title>
    <style>
        h1 {
            color: blueviolet;
        }
        h2 {
            color: red;
        }
        h3 {
            color: yellow;
        }
    </style>
</head>
<body>
    <h1>我是标题1,我用了css样式</h1>
    <h2>我是标题2,我用了css样式</h2>
    <h3>我是标题3,我用了css样式</h3>    
</body>
</html>

效果

2.类选择器

使用类选择器可以实现为不同的标签差异化样式。
语法:

/*定义*/
.类名 {
        属性1： 值1
        属性2： 值2
        ....
        }

/*调用*/     
<div class='类名'>  xxxx </div>

类选择器口诀：

样式点定义

class来调用

一个或多个

开发最常用

注意：

长名称或者词组可以使用中横线连接来为类选择器命名。

demo:

<style>
        .blueviolet {
            background-color: blueviolet;
        }
        .color {
            color: cyan;
        }
        .box {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="blueviolet color box">吵过，闹过，疯狂过，却从来没有后悔过，我们越来越笃定地相信，天长地久也不久。</div>

** 注：**
可以一次调用多个选择器，中间用空格分开。

3.ID选择器

语法

/*定义*/
#id名 {
        属性:  属性值；
}

/*调用*/
<div id="id名"></div>

口诀

 #号来定义
 id来定义

注意点:

ID选择器一次只能调用一个
 一个ID选择器只能调用一次

demo：

    <style>
        #box {
            font-size: 35px;
        }
    </style>
<body>
    <div id="box">第一次调用</div>
</body>

4.通配符选择器

语法

* {
    属性：属性值；
 }

注意点
通配符不需要调用，自动的就给所有的元素使用。

二.复合选择器

1.后代选择器（包含选择器）

语法 :

元素1 元素2 { 样式声明
}
eg ：
ul li { 样式申明 }

注释：

元素2必须是元素1的后代元素。

后代选择武器是对**后代元素**起作用

demo :

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>css标签选择器</title>
???/*父级元素*/
   <style>
????????.title?{
????????????background-color:?azure;
????????}
????????.title?h1?{
????????????color:?pink;
????????}
????????.title?h1?em?{
????????????color:aqua;
????????}
????</style>
</head>
<body>
????<div?class="title">
????????<h1>我是div-title的后代，我为pink色<em>我是em,我是我h1的后代，我为aqua色</em></h1>??
????</div>
</body>
</html>

效果

2.子选择器

子选择器只能作为某元素的最近一级后代元素（子元素）。

元素1>元素2 { 样式声明 }

3.并集选择器

并集选择器可以选择多组标签，同时定义样式。

元素1,
元素2，
...   ,
       { 样式声明}

4.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，或者选择第一或者第n个元素。例如：链接伪类，结构伪类等。

（1）链接伪类选择器

a:link  /*选择所有未被访问的链接*/

a:visited /* 选择所有已被访问的链接 */

a:hover    /*选择鼠标指针位于其上的链接*/

a:active   /*选择活动链接(鼠标按下未谈起*/

注意点：

1.链接伪类标签的顺序（lvha) ：a:link  a:visited a:hover  a:active

2.a标签在浏览器中有默认的样式，需要根据需求更改样式。

(2)`:focus`伪类选择器

：focus伪类选择器用于选取获得焦点（光标）的表单元素。

语法：

input:focus{
   属性： 属性值；
}

（3）结构伪类选择器（css3）

：first-child：选取父元素的首个子元素的指定选择器
：last-child：选取父元素的最后一个子元素的制定选择器
：nth-child（n）：匹配属于父元素的第N个子元素，不论元素的类型
：nth-last-child（n）：匹配从父元素最后一个子元素开始倒数的子元素

demo :

<style>
    li:first-child{ /*选择第一个子元素*/
        color: red;
    }
    li:last-child{ /*选择最后一个子元素*/
        color: blue;
    }
    li:nth-child(3){/*选择第三个子元素 n 代表第几个的意思*/
        color: orange;
    }
    </style>
</head>
<body>
<ul>
    <li>第一个子元素</li>
    <li>第二个子元素</li>
    <li>第三个子元素</li>
    <li>第四个子元素</li>
    <li>第五个子元素</li>
    <li>第六个子元素</li>
    <li>第七个子元素</li>
</ul>
</body>

效果

OXO3 CSS引入方式

1.内部样式表（嵌入式）

嵌入式样式表指的是把css写在HTML页面中，但是css是单独抽取出来放在<style>标签中。
语法：

<style>
    div {
        属性: 属性值；
    }
</style>

2.行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定css样式。
语法：

<div style="属性： 属性值;"> 键盘敲烂，去拾破烂</div>

3.外部样式（链接式)

方式一

 <link> rel="stylesheet" href="css文件路径”>

方式二

<style type="text/css">
    @import url("css/style.css");
</style>

注
<link>属于HTML而@import属于CSS
<link>的加载速度比@import快

OXO4CSS的三大特性

1.层叠性

两个或者多个相同选择器设置了相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
层叠性原则：

样式冲突 ： 遵循的原则是就近原则，哪个样式离结构近，就执行那个。

样式不冲突 ：不会层叠

2.继承性

子标签会继承父标签的某些样式。
**demo : **

<style>
    div {
        color: red;
        font-size: 18px;
    }
    <div>
        <p>我是div的子标签，我可以继承父标签的属性</p>
    </div>
</style>

注释：

合理的使用继承可以简约代码

可以继承的属性有：text-, font , line- 这些元素开头以及color属性。
注:
关于继承的详情，请参照这位大佬的博客

3.优先级

当一个元素指向多个选择器，但是选择器定义的样式是同一个的时候，就会有优先级的产生。

注：

选择器相同，则执行层叠性。
选择器不同，则根据选择器权重执行。

优先级权重

选择器	选择器权重
继承或 *	0.0.0.0
元素选择器	0.0.0.1
类选择器伪类选择器	0.0.1.0
ID选择器	0.1.0.0
行内样式 style=""	1.0.0.0
important	无穷大

注意点：

1.继承的权重为0，，不管父级元素权重有多高，子元素的权重都是0。

2.从左到右开始比较，相同位，比较下一位。

3.复合选择器会产生权重叠加 ,但是不会产生进位。
demo

<style>
/*标签选择器的权重为0.0.0.1*/
    li {
        color: red;}    
    /*两个标签选择器的权重之和为0.0.0.2*/
    ul li {
          color: red;
   }
</style>

原文链接:https://www.cnblogs.com/lc-snail/p/12588316.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：HttpServlet在第一个Servlet程序中的知识点

下一篇：sass案例--实现高仿今日头条H5版新闻列表页

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签

前端基础CSS篇之一

前端基础CSS篇之一

OXO1 写在前面

1.HTML和CSS的对比

2.CSS概述

（1）概念

（2)作用

(3)CSS语法

（4）CSS注释：

OXO2 选择器的分类

一. 基础选择器

1.标签选择器

2.类选择器

3.ID选择器

4.通配符选择器

二.复合选择器

1.后代选择器（包含选择器）

2.子选择器

3.并集选择器

4.伪类选择器

（1）链接伪类选择器

(2):focus伪类选择器

（3）结构伪类选择器（css3）

OXO3 CSS引入方式

1.内部样式表（嵌入式）

2.行内样式表

3.外部样式（链接式)

OXO4CSS的三大特性

1.层叠性

2.继承性

3.优先级

注 ：

优先级权重

(2)`:focus`伪类选择器

注：