CSS学习笔记_tac css-CSDN博客

本文链接：https://blog.csdn.net/Y_Tseng/article/details/82490925

CSS学习笔记

<head>
    <style>
        .out .box{ 属性1 : 值1; }
        ul li{ 属性2 : 值2; }
    </style>
</head>
<body>
    <div class="out">
        <div class="box"></div>
        <!--只有此处会受影响，即使out与box中还有一级，
        也没有关系，box还是会受到影响因为已经精确到了out下的box-->
    </div>
    <div class="box"></box><!--这里没有父级，不会受影响-->
    <ul>
        <li></li>
        <li></li>
    </ul>
</body>

编组选择器

<head>
    <style>
        标签1,.name,#box{ 属性 : 值; }
        ul li{ 属性 : 值; }
    </style>
</head>
<body>
    <标签1>XXX</标签1>
    <标签2 class="name">XXX</标签2>
    <标签3 id="box">XXX</标签3>
</body>

伪类选择器

link 初始样式

<a href="http://">XXX</a> <!--默认样式，没访问时为蓝色字体加下划线-->

可在head中加入来改变初始样式：

<style>
    a:link{属性名:值}
</style>

visited 已访问后的样式

<a href="http://">XXX</a><!--默认样式，访问过的为紫色字体加下划线-->

可在head中加入来改变访问过后的样式：

<style>
    a:visited{属性名:值}
</style>

hover 鼠标移入时的样式

<a href="http://">XXX</a><!--默认样式，鼠标移入时无改变>

可在head中加入来改变鼠标移入时的样式：

<style>
    a:hover{属性名:值}
</style>

active 活动样式

<a href="http://">XXX</a><!--默认样式，鼠标点击时无改变-->

可在head中加入来改变鼠标点击时的样式：

<style>
    a:active{属性名:值}
</style>

注意:
上述四种状态如果全部都要用到时，最好按照link、visited、hover、active的顺序书写。
并不是只有a标签可以用到这些样式，其他元素/选择器也可以使用，如h1:hover{}、.name:active{}等。

文本样式

属性	名称	值
font-family	字体	中文字体用引号括起，多字体使用英文逗号隔开
font-size	字号	number
font-weight	字体粗细	normal-不加粗/bold-加粗体/100-900
font-variant	小型大写字母	normal/small-caps
line-height	行高	number-32px/倍数-1.5em
text-transform	大小写转换	lowercase-全小写/capitalize-首字母大写/uppercase-全大写
text-decoration	文本修饰	none/underline-下划线/overline-上划线/line-through-删除线
font-style	定义字体的风格	normal/italic-斜体字/oblique-倾斜的文字(没有斜体的字体应采用该属性)

注意:
使用代码缩写可减少CSS文件的大小，且更易于阅读。如：

font-family: "微软雅黑";font-size: 12px;line-height: 24px;font-weight: 900;

可简写为:

font: 900 12px/4px "微软雅黑"；

使用文字简化代码时，必须以字体结束，否则在实际中代码失效，字号和行高不是通过空格隔开，而是通过“/”分割，一定要注意字号在前，行高在后。
font：粗细字号/行高字体类型

文本区块

属性	名称	值
letter-spacing	字母间距	number
text-indent	文本的缩进	number-中文的首行缩进要么是字体像素的两倍像素值，要么直接用2倍(2em)表示
text-align	水平对齐	left/center/right
vertical-align	垂直对齐	baseline-基线/sub-下标/super-上标/top-顶部/middle-中间/bottom-底部
display	显示类型	none-隐藏/block-块级元素(独立显示在一行，方便定义宽高)/inline-行级元素(不方便定义宽高)/inline-block-行级块元素(既能显示在一行又能定义宽高)

元素	常见标签
块级元素	h1-h6、p、div、ui、ol、li、dl、dt、dd等
行级元素	a、span、strong、b、em、i、del、s、font等
行级块元素	img、input等

背景样式

属性	名称	值
background-color	背景颜色	如：red;或 #000;
background-image	背景图案	url(images/pic.jpg);【用于在文字下添加图片，默认进行平铺，图像权重更高，会盖住颜色】
background-repeat	背景重复	repeat(纵向和横向平铺)/no-repeat(不平铺)/repeat-x(横向平铺)/repeat-y(纵向平铺)
background-position	背景定位/偏移	水平方向-left/center/right/number、垂直方向-top/center/bottom/number，例：right bottom;或 100px 50px; 或-10px 0px;(向下/右为正值)
background-attachment	背景固定	scroll-默认值/fixed-固定背景（不随滚动条的滑动而移动）

注意:
背景代码简写：
background: 颜色路径重复偏移固定
这些值可以互换位置，不影响显示效果；但是偏移值是属于一个整体的，是不能拆开的。
想要单独改变某一值时，最好写完整的属性名。

盒子模型

属性	名称	用途	值
min-width	最小宽度	可以使宽度随着内容的增多而改增大	px像素/%百分比-会根据窗口/父级大小的改变而改变
min-height	最小高度	可以使内容的高度随着内容的增多而增大
max-width	最大宽度
max-height	最大高度

padding内边距

属性	名称	值
padding-top	上内边距	像素px
padding-bottom	下内边距
padding-left	左内边距
padding-right	右内边距

padding会增大元素本身的大小。

简写:

padding: 10px; /*上下左右全为10px*/
padding: 10px 20px; /*上下10px，左右20px*/
padding: 10px 20px 30px; /*上10px，左右20px，下30px*/
padding: 10px 20px 30px 40px; /*按照顺时针的顺序-上右下左*/

margin外边距

属性	名称	值
margin-top	上外边距	像素px
margin-bottom	下外边距
margin-left	左外边距
margin-right	右外边距

margin不会增大元素本身的大小。

简写:

margin: 10px; /*上下左右全为10px*/
margin: 10px 20px; /*上下10px，左右20px*/
margin: 10px 20px 30px; /*上10px，左右20px，下30px*/
margin: 10px 20px 30px 40px; /*按照顺时针的顺序-上右下左*/
margin: 10px auto; /*上下10px，左右会随着父级的大小的改变而自动居中改变*/
margin: 0 auto; /*水平居中在父级元素中*/

有些标签会自带边距，所以有时需要清楚样式：

*{padding: 0; margin: 0;} /*通用标签，清除所有的边距*/

border边框

属性	名称	值
border-width	边框宽度	number
border-color	边框颜色	颜色值/transparent-透明
border-style	边框样式	solid-实线/dotted-点线/dashed-虚线
border-top	上边框
border-bottom	下边框
border-left
border-right
border-top-color
等等…

简写:

border: 边框宽度 边框颜色 边框样式; /*三个值位置可以互换，顺序不是固定的*/

浮动

float浮动
值：left、right、none
clear清除浮动
left-在左侧不允许浮动元素
right-在右侧不允许浮动元素
both-在左右两侧均不允许浮动元素（当浮动的子级不能撑开父级时【父级元素没有设置高度】，可在浮动的最后面加上清除浮动的样式）

IE浏览器的兼容问题

有些特殊的网站需要考虑低版本浏览器，比如政府网站、教育系统网站。

IE6双倍边距
当元素有float属性，又有margin属性时，在IE6下面显示的margin的值是设置值的两倍。
→ 将有float属性的元素添加display:inline属性。
伪类选择器hover
IE6只支持a标签的CSS定义hover效果，其他标签添加hover效果没有任何作用。
→ 一方面可以使用JavaScript添加鼠标移入效果，另一方面只能将其他标签改变为a标签后再添加hover效果。
定义元素的不透明度
opacity:0.5，可以改变元素的透明度，取值范围是0~1，但是IE6不支持这种透明度表现方式。
→ IE6浏览器专属的透明度属性， filter：alpha（opacity=80），取值范围是0~100。
IE各个版本hack
属性hack方式

.box {_width:100px;}    /* IE6专用*/
.box {*+width:100px;}   /* IE7专用*/
.box {*width:100px;}    /* IE6、IE7共用*/
.box {width:100px\0;}   /* IE8、IE9共用*/
.box {width:100px\9;}   /* IE6、IE7、IE8、IE9共用*/
.box {width:330px\9\0;} /* IE9专用*/

选择器hack

*html .box{width:100px;}  /*IE6*/ 
*+html .box{width:100px;} /*IE7*/

CSS学习笔记

CSS学习笔记

目录

基本概念

写法格式

基础选择器

复合选择器

伪类选择器

文本样式

文本区块

背景样式

盒子模型

浮动

IE浏览器的兼容问题