css基础整理(1)之优先级

CSS作为前端WEB的一种基本辅助工具,基本在写任何WEB应用时,你都需要使用
下面整理了一些css的基本用法与语法

首先 CSS的引入方式有四种

外部导入 外部引入 内部样式 行内样式

行内样式是优先级最高且最接近原生的

<div style = "width:100%;">行内样式div>

这种语法是最简单的,但还是建议不要用,因为你行内样式写多了会让代码的维护性变低,到时别人看你的代码会觉得很乱。

再来是内部样式

<style>
    .div{
        width: 100%;
    }
style>

外部引入的话,我们就需要一个写好的css文件了

DOCTYPE html>
<html lang="en">
    <head>
         <title>引入css样例title>
        <link rel="stylesheet" href="css文件路径.css">
    head>
    <body>
    body>
html>

导入式的话,其实和外部引入基本就是一个意思 就是写法不太一样

<style type = “text/css”>
	@import "文件地址";
	/*或者*/
	@import url("文件地址");
style>

css基础整理(1)之优先级_第1张图片
css改变字体大小语法font-size

    font-size: 30px;

设置字体大小为30像素点

css设置字体font-family

 font-family: "隶书";

但现在如果客户的电脑中没有我们设置的字体那这个真的就是没写一样,那么我们就可以设置多几个字体

  font-family:“楷体”,”宋体”;

这个代码也不难理解 就是默认楷体,如果没有楷体则用宋体 你还可以继续以这种形式往后写
css基础整理(1)之优先级_第2张图片

a:active{}

就可以编写一个激活的链接的样式了
用法比较简单

css有些样式存在继承的特性 例如
你把一块div的font-size 设置为 30px 被这块div包裹的元素也会有font-size: 30px;的样式
会继承的样式也不是很多 实际操作一下慢慢就知道了

css给元素设置样式 需要通过选择器
其中有

全局选择器,当设置为*当样式 会的页面的所有样式发生效果
权值 0

<style>
    *{
        font-size: 12px;
    }
style>
<div>div>

首先是标签选择器,通过标签名设置样式
权值 1

<style>
    div{
        font-size: 12px;
    }
style>
<div>div>

类选择器,通过class锁定需要添加样式的元素
权值 10

<style>
    .divclass{
        font-size: 12px;
    }
style>
<div class = "divclass">div>

id选择器 有一定编程经验的人应该都知道 在页面中id是唯一的 例如 你给一个div设置了id值为divid,那么如果有其他元素的id也等于divdi时页面就不规范了,而且js的id选择器是只选择一个的 所以还是写规范点好 免得出问题
id选择器权值 100

<style>
    #divid{
        font-size: 12px;
    }
style>
<div id = "divid">div>

行内样式,之前也样式过了
权值 1000

<div style = "width:100%;">行内样式div>

权值的作用在于 当不同选择器同时对同一个元素设置了同一种样式
时 选择权值高的 例如 我 标签设了字体 font-size: 12px; id选择器写了 font-size: 20px; 如果他们同时作用给了一块div 那么此时 div的字体大小为20px
因为id选择器的优先级更高
那么就会有人好奇 行内样式无敌了吗?
并不是 例如
我们可以这样写 div.divclass#divid
那么此时这个样式的优先级 就是 1+10+100 多个选择器写在一起可以提升样式优先级 但显然它还是敢不敢行内样式
那么就要用!important

<style>
    div{
        font-size: 12px !important;
    }
style>
<div style = "font-size: 30px;">div>

运行之后你会发现 元素的字体大小是12px 这就是!important的作用 声明高优先级 比行内样式还高

你可能感兴趣的:(前端,css)