前端小白学习------css初级篇-css引入css基础选择器选择器权重

前端小白学习------css初级篇-css引入css基础选择器选择器权重

    • 主流浏览器
    • css 装修html
      • 引入css :1.行间样式
      • 引入css :2.页面级css
      • 引入css :3.外部css文件
    • 选择器
      • id选择器
      • class 选择器
      • 标签选择器
      • 通配符选择器
      • 属性选择器

主流浏览器

主流浏览器 内核
IE trident
Firefox Gecko
Google chrome Webkit/bilnk
Safari Webkit
Opera presto
<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>documenttitle>
head>
<body>
	//注释:1备注,2.调试bug
	
	//快捷键:ctrl + ?





body>
html>

css 装修html

cascading style sheet

引入css :1.行间样式

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>documenttitle>
head>
<body>
	//1、引入css
	行间样式:
	<div style="
	width:100px;
	height:100px;
	background-color:red;
	">div>
	

body>
html>

引入css :2.页面级css

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>documenttitle>

	<style type="text/css">
	div{
	width:100px;
	height:100px;
	background-color:red;
	}
	style>
	
head>
<body>
	
	 <div> <div>
body>
html>

引入css :3.外部css文件

lesson3.css里的代码:

div{
	width:100px;
	height:100px;
	border-radius:50%;
	background-color:red;
	}

lesson3.html里的代码

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>documenttitle>
	
	<link rel="stylesheet" type="text/css" href="lesson3.css">

head>
<body>
	 <div> div>

body>
html>

异步:同时执行
同步:一个执行完在执行另一个。

选择器

id选择器

#only {
background-color: red;
}
<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>documenttitle>
	
	<link rel="stylesheet" type="text/css" href="lesson3.css">

head>
<body>
	
	 <div id="only">123 div>
	 <div id="only">123 div>//这样就不行。id是一一对应的。


body>
html>

class 选择器

css代码:

.demo{
background-color:yellow;
}
.demo1{
	color:#f40;
}

html代码:

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>documenttitle>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
head>
<body>
	<div class="demo demo1">123div>
	
body>
html>

  • id是一一对应

  • class和元素也是多对多的关系

标签选择器

div{
	width:100px;
	height:100px;
	border-radius:50%;
	background-color:red;
	}
<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>documenttitle>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
head>
<body>
	
	<div>123div>
	
body>
html>

通配符选择器

css代码:

*{
	background-color:green;
}

html代码:

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>documenttitle>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
head>
<body>
	
	<div>123div>//*是通配符,全屏都会绿。
	
body>
html>

属性选择器

[id] {
	background-color: red;
}
或
[id="only"] {//加上值的也可以
	background-color: red;
}
<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>documenttitle>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
head>
<body>
	
	<div id="only">123div>//凡是用到id的就都会用到上面的css
	<div id="">123div>//凡是用到id的就都会用到上面的css
	//class属性也是同理
body>
html>

!important > 行间样式>id选择器>class选择器=属性选择器(谁在下面就是谁)>标签选择器>通配符选择器
上面这些值是有css权重的。

标签 权重值 (256进制)IE6.0
!important INFINITY
行间样式 1000
id 100
class,,属性,伪类 10
标签,伪元素 1
通配符 0

你可能感兴趣的:(前端小白学习,css,html,js,javascript,vue)