HTML css 2 css_html2个css-CSDN博客

本文链接：https://blog.csdn.net/luyuncsd123/article/details/8219404

1. css基础

1.1. 什么是css *
1) css即cascading stylesheet（级联样式表）
2) css为网页提供表现的形式，即按照w3c的建议，实现一个比较好的网页设计，应该按照如下的规则：
 网页的结构不数据，应该写在.html文件里
 网页的表现形式，应该写在.css文件里
 网页的行为，应该写在.js文件里

 这样做的原因是，将网页的数据、表现、行为分离，方便代码的维护

1.2.2. 常用的选择器 **

1.2.2.1. 标记选择器(简单选择器) **

标记的名称{ 属性名：属性值 ; ... ; }

1.2.2.2. class选择器 ***
 第一种形式匿名的class选择器

. 选择器的名称{ 属性名：属性值 ; ... ; }
 注：标记的class属性值不选择器的名称相等

 第二种形式有名的class选择器

标记的名称 . 选择器的名称{ 属性名：属性值 ; ... ; } 
注：除了标记的class属性值不选择器的名称相等以外，还要求标记的名称匹配

1.2.2.3. id选择器

# 选择器的名称{ 属性名：属性值 ; ... ; } 
标记的id属性值不选择器的名称相等。 注意，在同一个html文件当中，id值必须唯一

1.2.2.4. 选择器的分组

* h1 , h2 , h3{ color : green ; } 对以" , "隔开的选择器施加相同的样式

1.2.2.5. 选择器的派生 *

#d2 p{ font-size :120px ; } 表示id为d2的标记内部的所有p标记的字体为120px

五种选择器

1.3. 样式的继承

子标记会继承父标记的样式，如图所示段落标记<p>为<body>的子标记

1.4. 样式的优先级 *

注意：从上到下，优先级越来越高

内部样式比外部样式优先级高

 演示2
内联样式比内部样式优先级高
 Html02html
 演示结果

样式的优先级 *

Style.css body{

 color :red ;

font-size :30px ;

<html>

<!--样式的优先级-->

<head>

<link rel="stylesheet" type="text/css" href="style.css">

 <style> body{ font-size :60px ; }

</style>

</head>

<body style="font-size :100px ;"> hello </body>

1.5. 两个关键属性

1) display
display的3个值
 none : 丌显示该标记
 block : 按块标记的方式显示
 inline : 按行内标记的方式来显示
2) position
position的3个值
 static(缺省值)： 浏览器在默认情况下，会按从左到右，从上到下来依次摆放各
个标记
 absolute： 相对父标记偏移
 relative： 先按照默认的方式摆放，然后再偏移

<html>

<!--display属性-->

 <head>

 <style>

#d1{ width :100px ; height :100px ; background-color :red ; display :inline ; }

#d2{ width :100px ; height :100px ; background-color :yellow ; display :inline ; }

 </style>

</head>

<body>

<div id="d1">hello</div>

<div id="d2">hello2</div>

</body>

</html>


display的应用1
使用JavaScript迚行事件控制，可以控制选项显示戒者隐藏（display :none）

display的应用2
使用display可以完成如下图所示的丌同选项卡（页面技术1和页面技术2）显示子内容的切换

position属性 ***

<html>

<!--position属性-->

 <head>

<style>

 #d1{ width :200px ; height :200px ; background-color :red ; }

#d1_1{ left :30px ; top :50px ; width :80px ; height :80px ; background-color :yellow ; position :absolute ; }

#d2{ left :30px ; top :50px ;width :100px ; height :100px ; background-color :blue ; position :relative ; }

</style>

</head>

<body>

<div id="d1">

 <div id="d1_1">

</div> </div>

<div id="d2"> </div>

</body>

</html>

1.6. 块标记和行内标记 *
1) 块标记（另起一行）

常见的块标记：
 div
 p
 img
 form
 table
 h1...h6
 ul
 li

2) 行内标记（丌用另起一行）
常见的行内标记
 span
 strong
 a

块标记和行内标记的对比

1.7. 一些常见的属性

1.7.1.

文本 * font-size :30px ; /* 字体大小 */

font-family : "宋体" //字体

font-style : italic/normal //风格

font-weight : 100 ; //粗绅 100~900

 text-align :center ; //对齐方式

left , right , center text-decoration : underline ; //加下划线

 cursor : pointer ; //光标的形状 wait

文本相关属性 *

#d1{ width :200px ; height :200px ; font-size :25px ;
font-family :"Arial" ; 
font-weight :900 ; 
cursor :wait ;
 border :1px solid black ;

<div id="d1">你好</div>

1.7.2. 背景

background-color : red ; //背景颜色

background-image : url(images/b1.jpg) ; //背景图片

background-repeat : no-repeat ; //平铺方式

repeat-x repeat-y background-position : 20px 10px ; //位置

background-attachment : fixed ; //依附方式 scroll(缺省)

可简化为：background : 背景颜色背景图片平铺方式依附方式水平位置垂直位置

#d1{ width :200px ; height :500px ;

border :10px solid black ;

background-image :url(images/nane.gif) ;

background-repeat :no-repeat ;

background-position :60px 40px ;

background-attachment :fixed ; }

1.7.3. 边框 *

border : 1px solid red ; //宽度 风格 颜色

border-left : border-right : border-bottom : border-top :

----------------------------------------------------------------------

#d1{ width :200px ; height :500px ; border :10px solid black ;

background-image :url(images/nane.gif) ;

background-repeat :no-repeat ;

background-position :60px 40px ;

background-attachment :fixed ; }

#d2{ width :200px ;

height :500px ;

/*

border :10px solid black ;

*/

 border-left :10px dotted black ;

border-right :10px solid red ;

border-bottom :10px solid yellow ;

border-top :10px solid blue ;

background :#cccccc url(images/nane.gif) no-repeat fixed 60px 40px ; }

1.7.4. 定位 *

width : 100px ; height : 200px ;

margin : //外边距 margin-left : 20px ; margin-top : 30px ; margin-right : 40px ; margin-bottom : 50px ; 也可以简化为 margin : 30px 40px 50px 20px ; //顶、右、底、左

此外，还有这样一些形式 margin : 0px ; margin : 20px auto ; //上、下各20px，左右平均分配 //一般用于居中
“混杂模式" : 在一个html文件当中，如果没有添加文档类型声明，ie浏览器默认会打开"混杂模式" , 即将浏览器的级别降低，以兼容老的网页。如果添加了文档类型声明，则ie会打开“标准模式"。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http ://www.w3.org/TR/html4/loose.dtd">

<html>

padding : //内边距 padding-left : 20px ; padding-top : 30px ;

padding-right :40px ; padding-bottom : 50px ; 也可以简化为 : padding :30px 40px 50px 20px ; //顶、右、底、左

还可以 : padding : 0px ; 注意：子标记会将父标记撑开

1.7.5. 列表相关 *

list-style-type : none ; //取消列表的选顷的符号

1.7.6. 浮动

浮动，即取消标记的独占一行的特性。浮动之后，其位置可以被其它标记使用

list-style-type : none ; //取消列表的选顷的符号

float : left ; //浮动

right clear : both ; //取消浮动的影响 , 指的是告诉浏览器，虽然浮动的标记让出了位置，但不能够使用

1.7.7. 链接的伪样式 *

a : link { color : red} 没有访问时

a : visited { color : blue} 访问后

a : active { color : lime} 鼠标点击但还没有放开时

a : hover { color : aqua} 鼠标指向时 //常用