CSS(一)介绍与基本使用方法

it2025-12-04  14

本章内容

简介使用方法选择器伪类

一、简介

css在一个网页中的主要作用:

HTML是网页内容的载体css样式是表现(外观控制)JaveScript是行为,用来实现网页特效效果

二、使用方法

A、方法有四种

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> /*导入样式*/ @import url(../css/index.css) /*嵌入样式*/ h3{color: yellow;font-size: 40px} </style> <!-- 链入样式 --> <link rel="stylesheet" type="text/css" href="../css/index.css"> </head> <body> <p>变红</p> <!-- 行内样式 --> <h3 style="color:red;font-size:30px">我是什么颜色</h3> </body> </html> 行内样式:在标签内部直接声明样式嵌入样式:在<head>中<style>内 声明样式链入样式:<head>中 用<link />链入导入样式:在<head>中<style>内 @import

B、优先级

  就近原则

C、四者的区别

类别引入方式位置加载行内样式开始标签stylehtml文件内同时嵌入样式<head><style>内html文件内同时链入外部样式<head><link>引用*css样式文件与html文件分离页面加载时,同时加载css样式导入式@import在样式代码最开始处css样式文件与html文件分离读取完html文件后加载

 

 

 

 

 

 

 

 

三、选择器

A、标签选择器(tagname)

  div{color:red;}

B、类选择器(.classname)

  .xx{color:red;}

C、全局选择器(*)

  *{color:red;}

D、群组选择器(,分隔)

  a,b,c,d{color:red;}

E、后代选择器(sapace分隔)

  a b c{color:red;}

F、优先级

  浏览器从上往下解释 采取就近原则

四、伪类

A、使用方法

link   未访问时visited  访问过hover   鼠标经过active   点击时 <style type="text/css"> /*补充代码*/ a:link{color:orange;} a:visited{color:green;} a:hover{color:green;} a:active{color:yellow;} </style>

B、注意先后顺序

link → visited → hover → active 

五、CSS的继承与层叠

A、继承

css的继承:父元素设置了样式,子元素可以继承父元素部分样式优点:减少代码量子元素不能继承的样式:边框线可以继承的样式:字体颜色和大小注意:元素的继承性是微弱的,当子元素与父元素样式冲突时,优先子元素。

B、层叠

b.1、css的层叠:1、可以对同一个元素定义多个样式;2、不冲突时,一个元素可应用多个样式;3、冲突时按权值规则;

b.2、选择器的权值:

行内样式:权值为1000ID选择器:权值为100;类和伪类选择器:权值为10;标签选择器:权值为1;通配符选择器:权值为0;

b.3、权值计算规则

同级不同选择器的个数每类选择器的个数乘以相应的权值把所有的值相加得出选择器的权值

b.4、优先权提升 !important :

一旦属性值后面加上!impotant 表明 优先使用这个样式使用方法:p{color:red!important;}

b.5、优先顺序: !important→权值 → 就近原则

六、CSS的命名

A、CSS颜色供hi命名规则

采用英文字母、数字以及 '_' 和 '-' 命名;命名形式:单字,连字符,下划线和驼峰使用有意义命名

B、常用的CSS样式命名

b.1、页面结构

页头:header导航:nav页面主体:main侧栏:sidebar页尾:footer栏目:column

内容:content/container

页面外围控制:wrapper容器:container左右中:left right center

 

 

 

 

 

 

b.2、导航

导航:nav左导航:leftsidebar主导航:mainnav右导航:leftsidebar子导航:subnav菜单:menu顶导航:topnav子菜单:submenu边导航:sidebar

摘要:summary

 

 b.3、功能

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

转载于:https://www.cnblogs.com/learn-python-M/p/7605457.html

相关资源:css的定义、作用,应用范围,基础知识,使用步骤
最新回复(0)