css笔记

来源：互联网发布：长沙网络自考编辑：程序博客网时间：2024/05/01 17:52

一、css认识

引入css的方式有3种：

1、内联样式引入   通过html标签的属性style来实现2、内部样式引入   通过在html的<head></head>标签内加入<style></style>,再加入要写的样式3、外部样式引入   在<head>标签中加入<link href="~~.css" rel="stylesheet" type="text/css" />引入已经写好的css文件   css文件内容和内部样式中<style>中内容一样方式

css的选择器：

1、元素选择器   通过元素名选中元素，语法： 元素名{}2、id选择器   通过给元素赋一个id，用id来选中元素。id是惟一的，语法：#id值{}3、类选择器   通过给元素赋一个类值，用类值选中元素。该元素是类中的一个，语法：.类名{}4、子元素选择器   通过选中元素下的子元素名选中子元素，语法：选中元素的方法  子元素名{}5、相邻选择器   通过选中元素的相邻元素名选中元素，语法：选中元素的方法  相邻元素名{}6、群组选择器   可以将用不同选择器选中的元素用逗号连起来，使用相同的样式，语法：选中元素的方法，选中元素的方法，....{},例如：#p1, #p2,span{}7、伪类选择器   在超链接中有关于鼠标的四个状态用到a:link{}a:hover{}a.visited{}a:active{}  未被访问的链接 鼠标指针移动到链接上  已被访问的链接  正在被点击的链接

二、常用的样式属性

color：red；字体颜色background-color：背景颜色background-image:url(lb.jpg);背景图片background-repeat:no-repeat;背景不重复background-position:center;背景位置font-size:24px;字体大小（small，medium，large，num+px）font-family:宋体;字体类型 font-weight:bold;字体加粗text-align:left;文本位置（left，right，center  居左，居右，居中）letter-spacing: 5px;字间距word-spacing: 30px;词间距（词指英文中的单词）border-width:5px;边框宽border-color:Red;边框颜色border-style:solid;边框样式（这3个边框属性可以写成一句：border:solid blue 3px;）（边框样式有：dotted solid double dashed  点状 实线 双线 虚线） border-collapse:collapse; 设置表格的边框折叠成一个单一的边框text-decoration:none;去下划线list-style-type:none; 去圆点float:left;  浮动布局margin:0 auto;设置居中position:fixed;设置元素为固定定位position:absolute;设置元素为绝对定位position:relative;设置元素为相对定位（相对定位限制绝对定位）overflow:hidden; /*visible(默认), scroll ,hidden*/（超出部分处理）

三、相关知识点

1、块级元素与行级元素   属于块级元素有：p,h1~h6,table,ol,ul,div...   属于行级元素有：span,a,i,sup,sub,b...   两者区别：(1).块级元素会独占一行，其宽度自动填满其父元素宽度       行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化           (2). 一般情况下，块级元素可以设置 width, height属性，行内元素设置width,  height无效       (注意：块级元素即使设置了宽度，仍然是独占一行的)           (3).块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,             margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生             边距效果。（水平方向有效，竖直方向无效）
2、浮动布局
   （1）.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移
         动，再通过margin属性调整位置
   （2）.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一
         个浮动框的边缘
   （3）.浮动的生成：使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认）
   （4）.浮动的影响：对附近的元素布局造成改变，使得布局混乱.浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成
      inline-block类型的元素，即同时拥有块级与行内元素的特征
3、链接的四种状态
   a:link - 普通的、未被访问的链接
  a:visited - 用户已访问的链接
  a:hover - 鼠标指针位于链接的上方
  a:active - 链接被点击的时刻
4、定位
    float定位（即浮动定位）： 这种定位方式很简单，只需规定一个浮动的方向（如：float:left;就表示这个元素向左边摆放），
   它的定位是相对于父元素容器；如果该元素设置了浮动，后面紧邻的则会受到浮动的影响，因此需要后面的元素若要不受影响，
   则要在后面清除浮动（可用clear:both;等方法），在两个相邻元素设置相同浮动的情况下，两元素将按顺序相邻摆放。这种定位
   使得元素脱离文档流。
     position定位是指定位置的定位，以下为常用的几种：
    1、static（静态定位）：
    当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这
       种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流；
    2、relative定位（相对定位）：
    该定位是一种相对的定位，可以通过设置left、top等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流；
    3、absolute定位（绝对定位）：
    这种定位通过设置top、right、bottom、left这些偏移值，相对于 static 定位以外的第一个父元素进行定位（这种定位通常设
       置父元素为relative定位来配合使用），在没有父元素的条件下，它的参照为body，该方式脱离文档流；
    4、fixed（固定定位）：
    这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显
       示一些提示信息，脱离文档流；
    5、inherit定位：
    这种方式规定该元素继承父元素的position属性值。

阅读全文

0 0