css基础

来源：互联网发布：linux安装telnet客户端编辑：程序博客网时间：2024/06/02 01:54

CSS

铺网页三种技术

html 站在语义的角度负责结构
css 站在美学的角度去进行美化
JavaScript 站在用户体验的角度进行交互

什么是css？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

层叠样式表 — 核心关键词

样式表：负责美化

层叠：样式不会被干掉，而只会被覆盖

三个基础选择器的差异

核心：结构与样式分离

CSS的使用

1. 直接在标签种添加相应的属性

eg:
<h1 style="color: green;">你好，世界！</h1>

2. 在head标签内使用style属性

eg:
<style> pre { color: red; } </style>

3. 使用link标签将css与html分离在.css文件中来编辑

eg:
<link rel="stylesheet" type="text/css" href="1.css">

三种基础选择器

1. 在style标签中来定义相应标签的属性

（最不精准的选择器）

eg：
p { color: green; }

2. 利用每个标签的id属性来进行唯一的标识

（最为精准）
eg:
#d1 { color: red; }

3. 利用标签的class属性来进行标识

（相对精准）
eg:
.c1 { color: blue; font-size: 50px; text-decoration: underline; }
标签中class的属性值可以有多个，并且标签中内容的样式与class属性值的先后顺序无关，只与css中的先后顺序有关（代码由上到下，顺序执行）
eg：class=”d1 d2”

4. 通配符”*”

（对所有标签进行标识）

综合选择器

1. 后代选择器

在定义标签样式时，标签内部的内容同时被定义（包括标签内部的标签）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>综合选择器1</title>    <style>        /*后代选择器*/        .d2 span {            color:blue;        }    </style></head><body>    <!-- 后代选择器 -->    <div class="d1">        <span>第一代span</span>        <div class="d2">            <span>第二代span</span>            <div class="d3">                <span>第三代span</span>            </div>        </div>    </div></body></html>

2.交集选择器

不同标签中的class属性值相同，但在css样式中，要想不同标签显示不同效果，则在class的值前加上前缀

/*交集选择器*/    div.j1 {        color: red;    }    em.j1 {        color: green;    }    strong.j1 {        color: yellow;    }<!-- 交集选择器 --><div class="j1">    我是标签div，叫j1</div><em class="j1">我是em标签，叫j1</em><br><strong class="j1">我是strong标签，叫j1</strong><div>我是div标签，没有名字</div>

3. 并集选择器

可以将相同样式的标签，放在一起定义，用逗号隔开

/*并集选择器*/    .b1,p,em {        color : red;    }<!-- 并集选择器 --><div class="b1">这里是并集选择器div标签，叫b1</div><p>这里是p（1）标签，在div外部没名字</p><em>这里是em标签，在div外部没名字</em><p>这里是p（2）标签，在div外部没名字</p>

4. 子元素选择器

其css样式定义中，只定义其子集中的标签

/*子元素选择器*/    #zid1>em {        color: green;    }<!-- 子元素选择器 --><div id="zid1">    <em>我是一代div中的em</em>    <div class="zclass1-1">        <em>我是二代div中的em</em>        <div>            <em>我是三代div中的em</em>        </div>    </div></div>

5. 序列选择器

在css样式中只能定义第一个和最后一个，和全部同时定义

/*序列选择器*/ul li:first-child {    color: red;}ul li:last-child {    color:green;}           <!-- 序列选择器 --><ul>    <li>一帆风顺</li>    <li>双喜临门</li>    <li>三幅开泰</li>    <li>四季发财</li>    <li>五谷丰登</li></ul>

6. 兄弟选择器

在css样式定义中中，“+”号表示对一个标签的相邻标签进行定义（注意代码的执行顺序是从上到下，故只能改变其后的标签），“~”表示对符号两侧的后一个标签进行定义，其包括了相邻的标点

/*兄弟选择器*/    /*相邻兄弟选择器*/    div+p {        color: red;    }    /*普通兄弟选择器*/    /*p ~ p {        color: green;    }*/    /*p + p {        color:yellow;    }*/<!-- 兄弟选择器 --><div>我是兄弟选择器中的div</div><p>我是兄弟选择器中第一个p标签</p><p>我是兄弟选择器中第二个p标签</p><p>我是兄弟选择器中第三个p标签</p>

继承

子标签可以继承父标签的属性，关于文字的css属性都可以进行继承：
color text- line- font-

<style>    .jc {        color: red;    }</style><div class="jc">    <span>我是span标签,继承了div标签的color属性</span></div>

权重问题

css样式定义中，对同一样式有多种选择器时（id，class，html），按照其相应的比值来权衡（选择器出现的个数），但id > class > html,与定义样式时，选择器的先后顺序无关，空格隔开;

eg:

<style>/*id  class html */    #box1 .hezi2 p {  /* 1   1   1*/        color: red;    }    div div #box3 p {  /*1  0  3*/         color: green;    }    div.hezi1 div.hezi2 div.hezi3 p { /*0 3 4 */         color: blue;    }</style><div class="hezi1" id="box1">    <div class="hezi2" id="box2">        <div class="hezi3" id="box3">            <p>文字颜色</p>        </div>    </div></div>

在权重比值相同时，则看css中代码执行的顺序；

eg:

<style>    #box2 .hezi3 p {        color: blue;    }    #box1 .hezi2 p {        color: red;    }</style><div class="hezi1" id="box1">    <div class="hezi2" id="box2">        <div class="hezi3" id="box3">            <p>文字颜色</p>        </div>    </div></div>

在css样式中，没有给出标签名，且选择的选择器类型也相同，则谁定位到标签最近则以为为准；

eg:

#hezi3 {        color:green;}#hezi1 #hezi2 {    color:red;}<div class="box" id="hezi1">    <div class="box" id="hezi2">        <div class="box" id="hezi3">            <p>猜猜我是什么颜色?</p>        </div>    </div></div>

4. 带有!important的关键字时，则以这一样式为准，但其余的则按上述规则，能够把”单独属性”的权重变为无限大。尽量少用；

块元素与行元素

块级元素和行内元素的区别：
1. 行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。
2. 块级元素会独占一行。而行内元素却部能够独占一行，只能和其他的行内元素共用一行。
3. 如果块级元素不设置宽度，那么块级元素会自动的沾满父元素的全部宽度。

行元素与块元素的相互转换
在css样式中display: inline block inline-block
inline: 行元素；
block：块元素；
inline-block：行块元素；

阅读全文

0 0