css基础向

来源：互联网发布：linux red5安装与配置编辑：程序博客网时间：2024/06/02 02:14

概念: CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
（简单理解为：男生眼中－－游戏装备，女生眼中－－化妆品）
位置：

<head>    /*内联式*/   <style type=”text/css”>    样式代码   </style>   /*外嵌式（建议）*/   <link rel=”stylesheet” href=”1.css”></head>/*行内样式*/<h1 style="color: red">行内样式表</h1>

选择器：即选择某个标签（嗯，接下来给你加装备或者给你化妆啦～～）

常见属性：(标签可去w3c,菜鸟教程等网站上查询)

    Width: 20px ;   --宽    Height: 20px ;  --高    Background-color: red ; --背景颜色    font-size: 24px ;   文字大小    text-align: left | center | right      --内容的水平对齐方式    text-indent: 2em;   --首行缩进    Color: red ;    --文字颜色

基础选择器：
标签选择器：标签{属性：值;} (页面所有该标签样式都改变)

<style type="text/css">        div{            font-size: 10px;            color:red;        }    </style>

tips：#000000; 前2为代表红色，中间2位代表绿色，后边2位代表蓝色。

类选择器：.自定义类名{属性:值; 属性:值；} （类名自定义，但不要low）

    <style type="text/css">        .content{            font-size: 10px;        }        .fox{            color:red;        }    </style></head><body><!--一个标签可同时使用多个类选择器--><div class="fox content">    一如昨日烛火 <br>    伴扁舟相随 </div>

ID选择器：#自定义名称{属性:值;}

 <style type="text/css">        .content{            font-size: 20px;        }       #fox{            color:green;        }    </style></head><body><!--一个标签可同时使用类选择器和ID选择器，但ID选择器一个标签只能使用一个,而且同一个ID选择器在同一个页面只能调用一次--><div id="fox" class="content">    一如昨日烛火 <br>    伴扁舟相随</div>

通配符选择器 *{属性:值;} 给所有标签统一样式（一般人不会这么用）

*{    color:red;}

复合选择器使用（多个选择器连接）

交集选择器（同时满足两者的标签）
标签＋类／ID 选择器｛属性：值｝

        div.box{            color:red;        }        div#fox{            color: yellow;        }<div class="box">    孤独是诗人具有的体会</div><div id="fox">    写首小调名字叫一库！</div>

后代选择器：选择器+空格+选择器{属性：值;}
要求：
1）后代选择器首选要满足包含（嵌套）关系。
2）父集元素在前边，子集元素在后边。

    <style type="text/css">        div span{            font-size:20px;        }        .box .fox{            color:red;        }        .box span{           background-color: green;        }    </style></head><body><div class="box">   <span class="fox">       小酒窝   </span></div>

子代选择器：选择器>选择器{属性:值;}（只能选择对应父级的直接子代）

    <style type="text/css">        div>span{            font-size:20px;            color:red;        }        p>span{            font-size: 30px;            color:green;        }    </style></head><body><div>   <span>小酒窝</span>    <p><span>长睫毛</span></p></div>

并集选择器：选择器+，+选择器+，选择器{属性:值;}（都使用同一个样式）

<style type="text/css">        div,p,span{            font-size: 30px;            color:red;        }</style></head><body><div>a</div><p>b</p><span>c</span>

选择器的优先级：
默认样式<标签选择器<类选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style  type="text/css">        /*链接默认显示*/        a:link{            color:darkgoldenrod;        }        /*链接鼠标悬浮显示*/        a:hover{            color:green;        }        /*链接在激活（触发）显示*/        a :active{            color:red;        }        /*链接访问之后显示*/        a:visited{            color:black;        }        /*获取光标的焦点*/        a:focus{            color:yellow!;        }    </style></head><body>    <a href="#">这是一条链接</a></body></html>

链接的文本修饰：

text-decoration:none | 无下划线
text-decoration:underline | 有下划线
text-decoration:line-through | 穿越线,删除线（中间有线）

        /*链接默认显示，无下划线*/        a:link{            color:darkgoldenrod;            text-decoration: none;        }        /*链接鼠标悬浮显示，有下划线*/        a:hover{            color:green;            text-decoration: underline;        }

背景属性
- 在设置背景属性的时候，需要给予宽度或者高度，否则将不会显示

.box{           height: 500px;           background-color: darkgoldenrod;           background-image: url("1.jpg");           background-repeat:no-repeat;           background-position:20px 30px;           background-attachment: fixed;       }       /*背景连写*/        .fox{            height:400px;            background:red url(2.jpg) no-repeat 20px 30px fixed;        }

background-color 背景颜色
background-image 背景图片
background-repeat 背景平铺 repeat（默认）| no-repeat | repeat-x | repeat-y
background-position 背景定位
- 方位值：left | right | center | top | bottom (一个方位值，另外的值默认居中；两个方位值，可不排序)
- 具体数字：（两个值，第一个为水平方向，第二个为垂直方向）
background-attachment 背景是否滚动 fixed | scroll

背景属性连写更方便，无顺序要求，但是背景图片的url为必写
备注：当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)，和标签调用选择器的顺序没有关系。

关于a标签悬浮显示的案例：

<head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        a{            display:inline-block;            width:67px;            height:32px;            background:url("../image/110.png")        }        a:hover{            background:url("../image/110.png") bottom;        }    </style></head><body><a href="#"></a></body></html>

行高：上下边距+文字高度，一般浏览器默认文字大小是16px
(两个基线之间的距离等于行高，当然感觉这个没啥需要注意的地方23333~~)
行高基线

之所以说没啥意思的地方是因为：
除了文字单位是px外，行高=文字大小*行高数值

盒子模型：
box模型

box

属性：
border-top-style: solid 实线 | dotted 点线 | dashed 虚线
border-top-color 边框颜色
border-top-width 边框粗细
（top可以换成其它方向：left | right | bottom）
简写：
border-top: solid red 5px;（无排序，线型必写）
border:solid green 10px;（四个方向统一）

边框合并：（将边框合并为一）
border-collapse:collapse;

阅读全文

1 0