Sheldon_Ng
Sheldon_Ng

CSS基础

一. 三原色

​ 在网页中我们可以直接书写颜色的名字，但是却记不了这么多的单词。可以使用 RGB（red green blue）三原色来表示颜色，书写形式为：

#ff00ff;

注意: 必须以#开头，后面紧跟着为6个16进制数，前两位为红色，中间两位为绿色，最后两位为blue.

#ff0000;   红色
#00ff00;   绿色
#0000ff;   蓝色
#ffffff;   白色
#000000;   黑色

二. 字体样式

字体

三. 样式选择器

3.1 标签选择器(重要）

3.2 id选择器(不重要)



	
"box1">

	
"box2">

在实际的工作中，定义样式采用class, 使用js的使用id.

3.3 类选择器(非常重要)



	
"box1">

	
"box2">

	
"box1">

为什么使用类选择器：

1. 为了样式可重用性。
2. 为了代码的可维护性。

3.4 通配符选择器

* {
      margin: 0;
      padding: 0;
  }

在实际工作只用这一种用法。

3.5 后代选择器(非常重要)

.box1 li{    /** 中间必须是空格，表示class为box1, 所有的后代li都应用以下样式 */
    color: green;
}
<body>
    
    <div class="box1">
        <ul>
            <li>用户li>
            <li>系统li>
            <li>菜案li>
        ul>
    div>
    <ul class="box1">
        <li>用户li>
        <li>系统li>
        <li>菜案li>
    ul>
   
   <div class="box1">
        <div>
            <div>
                <ul>
                    <li>电脑li>
                    <li>手机li>
                    <li>计生用品li>
                ul>
            div>
        div>
    div>
body>

3.6 子选择器(用的较少)

<style>
        /**
            .box1的直接的儿子p, 变为红色
         */
        .box1>p {
            color: red;
        }
style>
head>
<body>
	
    <div class="box1">
        <p>文字p>
        <p>系统p>
        <p>菜案p>
    div>
    
    <div class="box1">
        <div>
            <p>文字1p>
            <p>系统1p>
            <p>菜案1p>
        div>
    div>
body>

3.7 交集选择器(用的很少)

<head>
 	<style>
        /**
            p.red 意思是即是p标签，class又为red
         */
        p.red{
            color: red;
        }
    style>
head>
<body>
	
    <p class="red">红色p>
    <p class="red">红色p>
    <p class="red">红色p>
    
    <p>绿色p>
    <p>绿色p>
body>

3.8 并集选择器(非常重要)

<style>
		/** 所有p标签，span标签，含有class="red"下的所有的li标签 */
        p, span, .red li{
            color: red;
        }
        /*p {
            color: red;
        } */
        /*span {
            color: red;
        }*/
        /*.red li {
            color: red;
        }*/
    style>
head>
<body>
    <p>redp>
    <p>redp>
    
    <div class="red">
        <span>文字span>
        <ul>
            <li>电脑li>
            <li>手机li>
        ul>
    div>

    <div>greendiv>

    <span>redspan>
    <span>redspan>
body>

3.9 链接伪类选择器(非常重要)

​ 爱恨法则(love hate)

​ lv包包，hao

a {
	text-decoration: none;   /** 去掉a标签的下划线 */
}
/* 是连接正常情况情况下的样式 */
a:link {
	color: orange;
}
/* 访问过之后所呈现的颜色 */
a:visited {
	color: red;
}
/* 鼠标停留在a标签上的样色 */
a:hover {
	color: green;
}
/* 当鼠标按下的时候，但是没有松手的时候呈现的样式 */
a:active {
	color: darkblue;
}

A. a标签中不要嵌套a标签。

B. a标签中虽然可以放块级元素，但是在实际的工作中，我们需要将其转换为块级元素。

C. 在实际的工作中，a标签用的最多只有hover.

3.10 css3高级选择器

<style>
	/** ul下的第一个li标签 */
	/** 
	ul > li:first-child {
		color: #41A0BF;
	}
	*/
    /** ul下的第一个li标签 */
	ul > li:nth-child(1) {
		color: deeppink;
	}
    /** ul下的第二个li标签 */
	ul > li:nth-child(2) {
		color: green;
	}
    /** ul下的第三个li标签 */
	ul > li:nth-child(3) {
		color: purple;
	}
     /** ul下的第四个li标签 */
	ul > li:last-child {
		color: red;
	}
    
     /** ul下的第偶数个li标签 */
    ul > li: nth-child(2n){
        color:white;
    }
    
    /** ul下的第奇数个li标签 */
    ul > li: nth-child(2n+1){
        color:white;
    }
    
style>
<body>
	<ul>
        <li>电脑li>
        <li>手机li>
        <li>计生用品li>
        <li>日用品li>
    ul>
body>

四. 行内元素与块级元素

​    块级元素是可以指定宽高的，但是行内元素的宽高是根据内容而定，指定宽高无效。
   块级元素: 
  •  
    -