CSS笔记

CSS笔记

u 样式表：

  • 内联方式：例：<p style=”width:100px;height:100px;”></p>
  • 内部样式表：写在<head>标签的<style>里

<style>

div{    width:100px;    }

.a3{    height:100px;   }

</style>

  • 外部样式表：写在外部独立的css文件里，通过<link>引入

<link rel=”stylesheet” type=”text/css” href=”路径” />

三种样式表的优先级：内联>内部和外部(就近原则)>浏览器缺省设置

提高优先级：!important;

u 选择器：

一、     通用选择器：*{        }

二、     元素选择器：p{        }

三、     类选择器：.class{     }

四、     分类选择器：p.class{     }

五、     id选择器：#id{       }

六、     群组选择器：p,div,h1{        }

七、     后代选择器：div p{       }

八、     子代选择器：div>p{       }

九、     伪类选择器：

  • 链接伪类：

a:link             尚未访问的链接

a:visited        访问过的链接

  • 动态伪类：

div:hover        鼠标停在该div上的状态

button:active     元素被激活时的状态

input:focus       元素获得焦点时的状态

十、     不同选择器的优先级排名：

p#d1   >   #d1   >   p.class1   >   .class1   >p

内联   >   id  >   类/伪类    >   元素

u CSS重写：

  • 大多数块级元素默认存在margin和padding，为防止影响，要取消；
  • 需要margin和padding的元素，单独声明其margin和padding值
  • *{margin:0px;padding:0px;}              :取消默认的内外边距
  • ul,ol,li,dl,dt,dd{list-style:none;}    :取消默认的列表项标记

u 尺寸设置：

  • 所有块级元素如div、p、ul、ol、li可用尺寸属性：width、height等；
  • 大部分行内元素不可用尺寸属性：比如span，不能设置它的高度和宽度；
  • 但本身有width和height等属性的行内元素可以设置；

u 溢出：

三个属性：overflow   overflow-x     overflow-y

ü  visible：默认值，可见，不处理

ü  hidden：溢出部分隐藏

ü  scroll：内容超出后，有滚动条

ü  auto：在纵向上内容如果溢出，自动跳出滚动条

u 背景background相关：一个元素最多只能有一个背景图片

注：网页上能右击并“复制图片(网址)”或“图片另存为”的是img插入的图片；

  如果不能，就是背景图片；

  • 背景色background-color:“#颜色值”或“rgb( , , )”或“rgba( , , , )”。可取默认值transparent透明，会填充border和padding
  • 背景图片background-image:url(“ “)背景图片的url
  • background-clip：背景颜色覆盖区域
  • background-origin：背景图覆盖区域

ü  border-box:覆盖到边框

ü  padding-box:覆盖到内边距

ü  content-box:只覆盖内容

  • 背景图平铺background-repeat:repeat、repeat-x、repeat-y、no-repeat
  • 背景图尺寸background-size:

ü  100px 100px：宽 高

ü  50% 50%：宽 高

ü  cover：宽、高不按比例覆盖

ü  contain：宽、高按照比例自适应

  • 背景图固定background-attachment:scroll(默认值，滚动)、fixed(固定)
  • 背景图定位background-position:(截取背景图上的一小部分)

ü  left,right,top,bottom,center：

ü  x%,y%：水平和垂直方向上的偏移量

ü  x,y：水平和垂直方向上的偏移量

背景background相关属性的常用方法：

background:color url(“ “) repeat attachment position;

u 字体相关属性：

字体：font-family

字体大小：font-size

加粗：font-weight:bold或normal或赋400-900之间的整数值

斜体：font-style:normal或italic

小型大写字母：font-variant:normal或small-caps

字体相关属性的常用方法：

font:font-style font-variant font-weight font-size font-family;

u 文本格式相关属性：

一、     文本颜色：color:

二、     文本水平对齐：text-align:left/center/right

三、     线条修饰：text-decoration:none/underline/overline/line-through

四、     行高：line-height:

  • 如果行高>文本自身高度，文本将垂直居中显示。
  • 经常会和所在容器的height设置等高；

五、     首行文本缩进：text-indent:  px;    //首行文本缩进的距离

六、     文本阴影：text-shadow:h-shadow v-shadow blur color;

七、     文本溢出：

  • 处理空白(换行不换行)：white-space:normal/nowrap(不换行)
  • 文本溢出：text-overflow:（CSS2）必须配合overflow:hidden使用

ü  clip(默认值，溢出部分不显示)

ü  ellipsis(溢出部分用…代替)

八、     文本换行(仅针对英文字符)：

  • 长单词换行：属性word-wrap：值normal/break-word
  • 文本换行：属性word-break：值normal/break-all/keep-all

u 表格table相关属性 ：

  1. 表格在页面中水平对齐方式：margin:0px auto;
  2. 基本属性：padding  width  height 
  3. 单元格内文本垂直对齐方式:vartical-align    top/middle/bottom
  4. 单元格内文本水平对齐方式:text-align:left/center/right
  5. 表格特有属性：
  • 边框合并(table和td的同一侧边框进行合并，只展示一个):属性:border-collapse:separate/collapse，值为seperate时才能设置边框边距
  • 边框边距：在html里属性为cellspacing,CSS里属性为border-spacing:值：v1:水平、垂直都是v1  ;  v1 v2:水平间距v1,垂直间距v2
  • 表格标题caption位置：属性caption-side,值top/bottom(默认是top,在表格上方)
  • table显示规则(固定布局):属性table-layout，值为auto/fixed

ü  auto：(默认值)列宽由内容的多少来决定

ü  fixed：列宽由表格款和列宽决定，不受内容影响

u 边框border相关属性 ：

边框：border:width style color;     例：border:1px solid red;

  • style:solid/dotted(点状虚线)/dashed矩形虚线)
  • 边框颜色可设为transparent:有宽度、透明、不可见边框
  • 边框倒角：border-radius:单位是px或%

ü  如果值为1个数：4个角半径都一样

ü  如果值为4个数：从左上角顺时针开始的4个角

ü  单独倒一个角：border-top-left-radius:px或%

  • 边框阴影：box-shadow:h-shadow v-shadow[ blur spread color inset]

                         水平偏移    垂直偏移   模糊度   尺寸    颜色 内/外阴影

  • 图片边框：border-image:src width repeat;

注：border-image-source:url(“”)

 repeat(平铺)/round(铺满)/stretch(拉伸)

u 框模型

  • 总宽度=左margin+左border+左padding+width+右padding+右border+右margin
  • 总高度=上margin+上border+上padding+height+下padding+下border+下margin
  • margin:垂直外边距相遇时会合并，结果取大值；水平外边距不会合并，会相加；

①　     左右Margin为auto,该元素会在父级元素中水平居中显示;

②　     可以为负值；

③　     大多数块级元素都默认存在外边距；要设置外边距为0，防止影响效果；

  • padding:为0或为正数，没有auto这个值，只有背景能占据padding区域

u 水平方向对齐方式：

  • align:left/center/right;
  • text-align:left/center/right;
  • margin:0px auto;

注：span等行内元素没有宽度，设置不了align，可在外层套个div或p，设置该块级元素的align属性

u 垂直对齐方式：

  • valign:(表格里有这个属性)
  • vertical-align:

①　修改td中文本垂直对齐方式

②　img图像周围文本相对于图像垂直对齐方式

u 渐变：

l  线性渐变：

linear-gradient(angle,color1 point1,color2 point2……)

注：angle常用的值：

①　to top      等效于   0deg

②　to right    等效于   90deg

③　to bottom   等效于   180deg

④　to left     等效于   270deg

l  径向渐变：

radial-gradient([size at position,]color1 point1,color2 point2,……)

注：size:径向渐变的半径

position：圆心：left/right top/bottom

  left/right/top/bottom center

l  重复线性渐变：

repeating-radial-gradient([size at position,]color1 point1,color2 point2,……)

l  重复径向渐变：

repeating-linear-gradient(angle,color1 point1,color2 point2……)

l  渐变的浏览器兼容问题：

ü  Firefox:              -moz-

ü  Chrome、Safari、360: -webkit-

ü  Opera:                 -o-

  • PC端：除了正常的样式外，大多情况下要三种兼容都做；
  • 手机端：除了正常的样式外，大多情况下做个-webkit-就够了；
  • IE8及以下的版本不支持渐变；

u 定位方式：

  1. 普通流定位：正常文档流
  2. 浮动定位：float
  3. 相对定位：position:relative;left/right:……;top/bottom:……;(相对于自身原本应该出现的位置)
  4. 绝对定位：position:absolute
  5. 固定定位:position:fixed

u 浮动   属性：float:

  • 常用于特殊的页面布局
  • 行内元素、块级元素都可以浮动；
  • 浮动元素的外边缘不会超过其父层元素的内边缘，也不会超过平级浮动元素的外边距边缘
  • 不会重叠，只能左右浮动，不能上下浮动。行内元素一旦float后,可以设置width和height
  • 属性：float   值：left/right/none(默认值，不浮动)
  • 清除左右两侧浮动元素影响：定义了元素的哪个边上不允许出现浮动元素

属性：clear     值：none/left/right/both

如果相邻两个元素都想浮动、但不在同一行显示，就可以用clear:both

u 显示方式   属性：display:

值：none:所有东西隐藏，不可见，不占空间

block:变为块级元素

inline:变为行内元素

inline-block:变为行内块元素

u 显示效果   属性：visibility

值：visible:默认值，可见

 hidden:不可见，但仍占空间

 collapse:可删除一行或一列表格，不影响表格布局

visibility:visible/hidden                隐藏，占空间

display:block/inline/inline-block/none   不可见，不占空间

行内元素:

float:                         垂直居中对齐

display:inline-block         垂直底部对齐

u 不透明度    属性：opacity

  • 值：0-1之间的一个数值
  • 注：0:完全透明 不可见  ； 1:完全不透明 可见
  • background-color:rgba( , , ,0.5)          背景色半透明，内容正常
  • background-color:rgb( , , ) opacity:0.5   背景色正常，内容半透明

u 单元格内容的垂直对齐方式    属性：vertical-align

  • 常见的值：

①　baseline:默认，在父元素的基线上

②　top:元素顶端、顶部对齐

③　bottom:元素底端、底部对齐

④　middle:在父元素中垂直居中显示

  • 可用于修改img两侧文本text相对于图像img的垂直对齐方式

Text3

Text2                    img:{vartical-align:  }

Text1                 

u 列表项标记：属性：list-style-type   简写为list-style

  • 注：首先CSS重写，去掉列表项标记；
  • 值：有序列表ol:none decimal lower-roman upper-roman

无序列表ul:none disc circle square

  • 列表图像标志：用图像作列表项标记  

ü  属性：list-style-image

ü  值：url(“   ”)

u 光标形状：

元素边界范围内鼠标的光标形状  

属性：cursor:常见的值：

  • default:(默认)箭头
  • pointer:小手
  • crosshair:“十”字
  • text:输入文本时的小竖线
  • wait:“加载中”旋转的圈
  • help:箭头和问号

u 定位方式：属性 position

  1. top>0时，向下偏移；top<0时，向上偏移；
  2. bottom>0时，向上偏移；bottom<0时，向下偏移；
  3. left>0时，向右偏移；left<0时，向左偏移；
  4. right>0时，向左偏移；right<0时，向右偏移；
  5. 普通定位：static
  6. 相对定位：relative：      仍占空间
  • 以该元素自身本应出现的位置，通过上下左右偏移；
  • position:relative;

left/right:  px或  %;

top/bottom:  px或  %;

  1. 绝对定位：absolute        不占空间
  • 如果它的祖先元素有了相对/绝对/固定定位的，那么相对于这个祖先元素；
  • 如果它的祖先元素没有特殊定位的，全是正常定位，那么相对于body；
  • position:absolute;

left/right:  px或  %;

top/bottom:  px或  %;

  1. 固定定位：fixed           不占空间
  • 元素内容固定在页面某个位置处，从普通流中移除； 
  • position:absolute;

left/right:  px或  %;

top/bottom:  px或  %;

u 堆叠顺序： 属性 z-index

修改定位方式，很可能引起多个元素的重叠；修改层级关系；

属性：z-index      值：0之上的一个数值    值越大，层级越高

 

文本换行：

 

div:默认情况下，一大段英文再长也不换行，除非

遇到空格或汉字

 
   

 

 

 

div:默认情况下，一大段汉字会自动换行

如果div加了white-space:nowrap，也不换行

 

posted @ 2021-01-17 14:02  泷剑主1992  阅读(81)  评论(0)    收藏  举报