CSS

目录

1.CSS是什么2.CSS怎么用（快速入门）3.CSS选择器（重点 难点）4.美化网页（文字，阴影，超链接 ，列表渐变）5.盒子模型6.浮动7.定位8.网页动画（特效效果）

什么是CSS和发展史

1. Cascading Style Sheet层叠级联样式表    a. CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动2. 发展史：    i. CSS1.0    ii. CSS2.0　DⅣ（块） CSS,HTML与CSS结构分离的思想，网页变得简单，SEO    iii. CSS2.1　浮动，定位    iv. CSS3.0　圆角，阴影，动画浏览器兼容性～

CSS的快速入门及优势

建议程序格式

规范：

练习时可直接在html文件的head下用

<style>css程序</style>

css优势

a. 内容和表现分离b. 网页结构表现统一，可以实现复用c. 样式十分的丰富d. 建议使用独立于html的cs文件e.利用SEO，容易被搜索引擎收录

四种CSS的导入方式

行内样式：

<--!在标签元素内，编写一个style属性，编写样式即可-->    <h1 style="color:red">        内容    </h1>

内部样式：

在head内写<style>css代码</style>

外部样式：

１、编写css文件2、在html代码中，打入关联语句第一种写法链接式：	<link rel="stylesheet" href="css/style.css">第二种写法导入式：    <style>        @import url("css/style.css")    </style>

各种导入方式的优先级:就近原则

选择器

• 选择器作用：

• • 作用：选择页面上的某一个或者某一类元素

标签选择器

• 标签选择器，会选择到页面上所有的这个标签的元素
• 格式：标签类型{}

h1{color:"red";}

类选择器

格式：对应已定义的class， .class名{}

定义：class="映上"选择器：.映上{	color:"red";}

好处：可以多个标签归类，是同一个 class，可以复用

id选择器

格式：对应已定义的id， #id号{}

定义：id="映上"选择器：#映上{	color:"red";}

好处：id全场唯一

三种基本选择器的优先级问题：

• 不遵循就近原则，固定的id选择器 class选择器>标签选择器

层次选择器

• 后代选择器：

• • 在某个元素的后面 祖爷爷 爷爷 爸爸 你
  • 格式： 基本选择器 p{}

/*后代选则器,选择body括号内的所有p标签*/ body p{background:red;}

• 子选择器:
  • 只选择儿子
  • 格式： 基本选择器>p{}

/*子选择器,选择body括号内的p标签，不包括P标签括号内的*/ body>p{background:red;}

• 相邻兄弟选择器:
  • 同辈,一个
  • 格式： 基本选择器 p{}

/*相邻兄弟选择器，只有一个相邻向下*/.active p{    background:red;}

• 通用选择器：
  • 当前选中元素的向下的所有兄弟元素
  • 格式：基本选择器~p{}

/*相邻兄弟选择器，当前选中元素的向下的所有兄弟元素*/.active~p{    background:red;}

结构伪类选择器

• 两个好理解的结构伪类选择器：

<!--        选择ul下的第一个li元素-->        ul li:first-child        {            background:red;        }<!--        选择ul下的最后一个li元素-->        ul li:last-child        {            background:blue;        }

• 两个复杂的结构伪类选择器：

/*    定位到父元素，选择当前的第一个元素，而且必须为当前元素才生效*/p:nth-child(1){    background: green;}/*选中父元素，选择当前p元素的第二个*/p:nth-of-type(2){    background: aqua;}

属性选择器-重要、常用

• 格式：

• • 元素名[属性条件（可用正则表达式）]{css程序};

a[hrep$=jpg]{    background:yellow;}

• =绝对等于 *=包含 ^=开头为 $=结尾为

span标签及字体样式

span标签：重点要突出的字，使用span套起来，约定俗成

字体样式：

font-family:字体font-size：字体大小font-weight：字体粗细color：字体颜色

可以直接一起写：

p{font:oblique bolder 16px "楷书";}

文本样式

• 文本颜色：

p[class=fff]    {        color:green;    }

/*颜色单词RGB 0-fRGBA 0-f*/p[class=fff]{color:green;}

• 文本居中：
  • 格式：text-align:排版，居中

text-align:center

• 段落首行缩进：

text-indent:2em(两个字段)

• 行高：

height:300px;line-height:300px;说明：行高和块的高度，就可以上下居中

• 划线：

text-decoration:underline/line-through/overline(下中上划线)○ 超链接标签默认有下划线，去除：text-decoration:none;

• 文本图片水平对齐：

img,span{    vertical-align:middle;}

文本阴影和超链接伪类

超链接伪类：

<style>   	/*默认*/    a{}    /*鼠标悬浮的状态*/    a:hover{}    /*鼠标按住未释放的状态*/    a:active{}    /*已点击过后的状态*/    a:visited{}   </style>

文本阴影：

格式：/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/#price{    text-shadow:red 10px 10px  10px;}

盒子模型及边框使用

什么是盒子：

​ margin：外边距 padding：内边距 border：边框

border边框：

border:1px solid red;

• 边框的粗细 边框的样式：solid 实线 dashed 虚线 边框的颜色

  圆角边框:格式：border-radius:10px

display和浮动

回忆块元素和行内元素：

块级元素：独占一行 h1~h6 p div 列表...

行内元素：不独占一行 span a img strong...

• display使用：

• • display:

  • • block(块元素)
    • inline(行内元素）
    • inline-block(是块元素，但是可以内联，在一行!)

  • 说明：这个也是一种实现行内元素排列的方式，但是我们很多情况都是用foat，因为还在标准文档里面。

• loat使用：

• • float:

  • • right:右浮动
    • left：左浮动

overflow及父级边框場陷问题

• overflow用法：

  

• overflow:hidden：

• • 当父元素设置了height值时，则设置overflow:hidden后，子元素超出父元素部分隐藏
  • 当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。

• clear说明：

  

• 父级边框塌陷问题解决：

  • 增加父级元素的高度：

    

  • 增加一个空的dⅳ标签，清除浮动：

    

• • 在父级元素中增加一个 overflow:hidden；

  • • 父类添加一个伪类：after：
      

• 什么是伪类和伪元素：

• • 不专业的说带冒号的就是伪类或者伪元素了。作用就是提供一些特定的效果，比如未访问过的链接visited这些。
  • 伪元素的作用就是为你提供一些方便，如果有3行字，第一行要有不一样的效果，直接是

    第一行第二行第三行

    ，然后定义 p:first-line就可以了。

• 小结：

  • 浮动元素后面增加空div:简单，代码中尽量避免空div

  • 设置父元素的高度:简单，元素假设有了固定的高度，就会被限制

  • overflow:简单，下拉的一些场景避免使用

  • 父类添加一个伪类：after（推荐）写法稍微复杂一点，但是没有副作用，推荐使用！

• display和overfloat的对比：

• • display：

  • • 方向不可以控制

  • float：

  • • 浮动起来的话会脱离标准文栏流，所以要解决父级边框塌陷的问题

相对定位：

• • 相对定位：position:relative；

  • • 相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留

• 例子：

  

绝对定位和固定定位

• 绝对定位：

• • 没有父级元素定位的前提下，相对于浏览器定位。

  • 假设父级元素存在定位，我们通常会相对于父级元素进行偏移

  • 在父级元素范围内移动

  • 说明：

  • • 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

• 固定定位fixed：

• • 格式：

  • • position:fixed;

• 绝对定位、固定定位的区别：

• • 都会出现在相对于浏览器的位置，但绝对定位会随着滚动条发生位移，固定定位不会。

z-index及透明度

• 背景透明度；

• • 格式：opacity: 0~1;

• z-index：默认是0，最高无限

• • 作用：
    

来源：https://www.icode9.com/content-4-726101.html