CSS基础

最新推荐文章于 2022-11-30 21:37:28 发布

adve

最新推荐文章于 2022-11-30 21:37:28 发布

阅读量215

点赞数

分类专栏： HTML基础

本文链接：https://blog.csdn.net/qq_33430421/article/details/89064835

版权

HTML基础专栏收录该内容

11 篇文章 1 订阅

订阅专栏

HTML是网页内容的载体，CSS样式是表现（外观控制），JavaScript是行为，用来实现网页特效效果。

CSS层叠样式表（Cascading Style Sheets），用于定义HTML内容在浏览器内的显示样式。

CSS简化HTML相关标签，网页体积小，下载快，实现了内容与表现分离。

第1章CSS基础语法

CSS规则由两部分构成：选择器，声明。如 h1{color:red;font-size:14px;}，h1是选择器控制的，声明由属性和值控制，大括号要紧挨在选择器的后面，属性值之间由分号隔开。

CSS引用：使用style标签

写在<head></head>标签内：

css样式...

</style>

有相同值的标签，在设置样式时，可以将选择器写在一起，用逗号隔开，声明同样的内容即可。

CSS注释： /* */

CSS使用方法

行内样式（内联样式）

直接在开始标签内使用style属性，如：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
    <h1 style="color:green;font-size:40px;">行内样式</h1>
    <p style="color:blueviolet;font-size:40px;">行内样式</p>
</body>
</html>

这种写法如果添加的属性很多时，代码很长很冗余，同时样式和标签没有实现分离，增加了HTML文件的容量，也不便于后期的维护，所以行内样式不建议大量的使用。当页面中个别的元素需要特定的样式时，可以选择使用。

内部样式（嵌入样式）

把CSS样式代码写在style标签内，放在head标签里，如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
     
        h2,h3{color:blue;}
        div,p{color: red;font-size:20px;}
       
    </style>
</head>
<body>
    <h2>我是标题2，字体是蓝颜色</h2>
    <div>
        我是div标签里面的文字，我的字体大小是20px，字体颜色是红色
    </div>
    <h3>我是标题3，字体颜色是蓝色</h3>
    <p>我是p标签里面的文字，我的字体大小是20px，字体颜色是红色</p>
</body>
</html>

对于一些低版本浏览器不识别style标签，需要使用注释标签把样式表包裹起来，如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        <!--
        h2,h3{color:blue;}
        div,p{color: red;font-size:20px;}
        -->
    </style>
</head>
<body>
    <h2>我是标题2，字体是蓝颜色</h2>
    <div>
        我是div标签里面的文字，我的字体大小是20px，字体颜色是红色
    </div>
    <h3>我是标题3，字体颜色是蓝色</h3>
    <p>我是p标签里面的文字，我的字体大小是20px，字体颜色是红色</p>
</body>
</html>

外部样式（外联样式）

外部样式表，把CSS样式代码写在独立的一个文件中，文件中只写选择器和声明即可。扩展名：css文件名.css

引入外部文件，使用<link />标签，且位置在head标签之间。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS样式表</title>
    <link rel="stylesheet" href="css.css" type="text/css">
    <!-- css.css内部代码为：
    div{color:red;font-size:30px;} -->
</head>
<body>
	<div>
		div里面的文字，设置成红色
	</div>
</body>
</html>

在开发中经常使用外部样式的方法，好处是：1、HTML和css样式是分离的 2、便于css样式的修改，直接在css文件中修改样式，页面显示的样式就直接改变了。

导入式

方法为 @import "外部CSS样式"，需要写在style标签内。有两种书写方法如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS样式表</title>
    <style type="text/css">
        @import "css.css"; /* 注意此处有分号 */  
        /* 或者是写成这样 @import url(css.css); */
    </style>
    <!-- css.css内部代码为：
    div{color:red;font-size:30px;} -->
</head>
<body>
	<div>
		div里面的文字，设置成红色
	</div>
</body>
</html>

使用外部样式的好处：

1、CSS和HTML分离

2、多个文件可以使用同一个样式文件

3、多文件引用同一个CSS文件，CSS只需下载一次

CSS使用方法区别
类别	引入方法	位置	加载
行内样式	开始标签内style	html文件内	同时
内部样式	<head>中<style>内	html文件内	同时
链入外部样式	<head>中<link>引用	CSS样式文件与html文件分离	页面加载时，同时加载CSS样式
导入式@import	在样式代码最开始处	CSS样式文件与html文件分离	在读取玩html文件之后加载

CSS使用方法优先级

行内样式>内部样式>导入式，但是注意，内部样式和外部样式谁更接近内容，谁的优先级就高，即就近原则。

第2章CSS选择器

标签选择器和类选择器

标签选择器：以HTML标签作为选择器：直接写标签名，通过标签选择器设置样式，那使用该标签的内容都引用该样式。

类选择器

为HTML标签添加class属性。在开始标签内添加class属性，在style标签内添加.(class的值)来改变样式，如果对不同内容使用了相同的class值，那么显示为相同CSS样式。

<head>
    <meta charset="UTF-8">
    <style type="text/css">
       .red{color: red;}
    </style>
</head>
<body>
    <h1 class="red">内容1</h1>
    <p>内容2</p>
    <p class="red">内容3</p>  
</body>

可对不同类型元素的同一个名称的类选择器设置不同的样式规则：

<head>
    <meta charset="UTF-8">
    <style type="text/css">
       p.red{font-size: 30px;}
       h1.red{font-size: 40px;}
    </style>
</head>
<body>
    <h1 class="red">内容1</h1>
    <p>内容2</p>
    <p class="red">内容3</p>  
</body>

同一个元素可以设置多个类，之间用空格隔开：

<head>
    <meta charset="UTF-8">
    <style type="text/css">
       .fsize{font-size: 20px}
    </style>
</head>
<body>
    <h1 class="red">内容1</h1>
    <p class="red fsize">内容2</p>
    <p class="red">内容3</p>  
</body>

ID选择器

为html标签添加ID属性，通过ID选择器来为具有此ID的元素设置CSS规则：

<head>
    <meta charset="UTF-8">
    <style type="text/css">
     #p1{color: pink;}
     #p2{font-size: 60px}
    </style>
</head>
<body>
    <h1 >内容1</h1>
    <p id="p1">内容2</p>
    <p id="p2">内容3</p>  
</body>

注意：id是唯一的，值不能重复，且每个id属性只能对应一个值，不能像class一样对应多个。

群组选择器和全局选择器

群组选择器

集体统一设置样式，可以将任意多个选择器分组在一起，比如元素选择器、类选择器、ID选择器等。

全局选择器

对所有的标签设置样式，在开发时使用全局选择器在最开始将所有元素的边距等样式去掉。

    <head lang="en">
	    <meta charset="UTF-8">
	    <title>选择器的使用</title>
	    <style type="text/css">
	    	*{font-size: 30px}/* 全局选择器 */
            .a,#b,p{color: green;}/* 群组选择器 */
            #c,span{color: blue;}/* 群组选择器 */
	    </style>
	</head>
	<body>
		<h3 class="a">我是标题3里面的文字</h3>
		<div id="b">我是div里面的文字</div>
		<p>我是P里面的文字</p>
	    <a id="c">我是a里面的文字</a>
	    <span>我是span里面的文字</span>
	</body>

css后代选择器

考虑树形结构，父代与子代的概念。使用后代选择器设置，之间用空格隔开。后代选择器的优先级比

    <style type="text/css">
        p a em{.....}/* p标签中a标签中的em */    
        #p1 em{.....}/* id为p1的标签中的em */
        p.red a em{.....}/* class为red的p标签中a标签中的em */
        p .red a em{.....}/* p标签中class为red的标签中的a标签中的em */
    </style>

伪类选择器

伪类选择器定义特殊状态下的样式，无法使用标签、id、class及其他属性实现。

链接伪类：激活状态、以访问状态、未访问状态和鼠标悬停状态。链接伪类的顺序必须是：:link>:visited>:hover>:active，说明：

1、a:hover必须置于a:link 和 a:visited之后才有效

2、a:active必须置于a:hover之后才有效

3、伪类名称对大小写不敏感

伪类	说明
:link	未访问的连接
:visited	已访问的连接
:hover	鼠标悬停状态
:active	激活的链接(鼠标点击且还未松开时的状态)

伪类 :hover和 :active 不止用于链接，还可用于其他元素

1、:hover用于访问的鼠标经过某个元素时

2、:active用于一个元素被激活时

兼容性问题：IE6及跟更早版本，支持<a>元素的4种状态，不支持其他元素的:hover和 :active

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <style>
        a:link{color: red;}
        a:visited{color: green;}
        a:hover{font-size: 30px;font-weight:bold;}/*加粗*/
        a:active{color: orange;}
    </style>
</head>
<body>

    <a href="http://www.imooc.com">点击一下</a>
</body>
</html>

第三章CSS继承、层叠和优先级

CSS继承和层叠

继承好处：父元素设置样式，子元素可以继承部分属性。

CSS层叠：可以定义多个样式，不冲突时，多个样式可层叠为一个，冲突时，按不同样式规则优先级来应用样式。

chrome浏览器默认字体大小16px，h1默认字体大小font-size：2em。

css选择器优先级

行内样式》内部样式》外部样式，链入外部样式与内部样式表的优先级取决于所处位置的先后，最后定义的优先级最高（就近）。

同一个元素引用标签、id、class定义样式时，优先级： id选择器>class选择器>标签选择器。

同一个元素引用相同类型定义，且样式冲突时，后定义的样式会覆盖先定义的样式（就近）。

css权值

CSS优先级规则：

同一样式表中（同一个style中，或同一个外部CSS样式文件内）：

1、权值相同使用就近原则。2、权值不同，根据权值判断CSS样式，使用权值高的。

选择器权值
标签选择器	1
类选择器和伪类	10
id选择器	100
通配符选择器 *{ }	0
行内样式	1000

权值规则：统计不同选择器的个数，每类选择器的个数乘以相应权值，把所有的值相加得出选择器的权值。

如: #main div.warning h2{...}

id选择器有1个（1*100），class选择器有1个（1*10），标签选择器有2个（2*1），权值：100+10+2=112，根据优先级规则选择css样式。

css权值和优先级

! important规则，可调整样式规则的优先级，添加在样式规则之后，中间用空格隔开，如 div{color:red !important;}。在一定条件下，优先级是最高的，比行内样式还要高。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS优先级</title>
    <style type="text/css">
         ul .li1{color: orange !important;}  /*最终显示为橘色*/
    </style>
</head>
<body>
	<ul>
        <li style="color:green" class="li1">JS基础</li>  
        <li>JS函数</li> 
        <li>JS对象</li>
    </ul>
    <ol>
        <li class="li1">CSS基础</li>  
        <li>CSS语法</li> 
        <li>CSS优先级</li>
    </ol>
</body>
</html>

第四章CSS应用

CSS命名规范

1、采用英文字母、数字以及"-"和"_"命名

2、以小写字母开头，不能以数字和"-"、"_"开头

3、命名形式：单子，连字符，下划线和驼峰

4、使用有意义命名

常用的CSS样式命名：

页面结构
页头	header	导航	nav
页面主体	main	侧栏	sidebar
页尾	footer	栏目	column
内容	content/container	页面外围控制	wrapper
容器	container	左右中	left right center

导航
导航	nav	左导航	leftsidebar
主导航	mainnav	右导航	rightsidebar
子导航	subnav	菜单	menu
顶导航	topnav	子菜单	submenu
边导航	sidebar	标题	title
		摘要	summary

功能
标志	logo	注册	register
广告	banner	搜索	search
登陆	login	功能区	shop
登录条	loginbar	标题	title

id不要滥用，谨慎使用，适当使用class。

adve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

HTML是网页内容的载体，CSS样式是表现（外观控制），JavaScript是行为，用来实现网页特效效果。CSS层叠样式表（Cascading Style Sheets），用于定义HTML内容在浏览器内的显示样式。CSS简化HTML相关标签，网页体积小，下载快，实现了内容与表现分离。第1章CSS基础语法CSS规则由两部分构成：选择器，声明。如 h1{color:red;font-...
复制链接

扫一扫