CSS 选择器
  基本选择器grif
    *通配符:匹配所有的html标记,所有吊机都会改变的
    标签选择器:将其匹配指定的html标记
    class选择器:给一类HTML标记加样式。这里所指的“一类”是:每个HTML标记都有一个class属性,且class的值一样。class属性是公共属性,每个HTML标记都有
    id选择器:给指定id的元素添加样式。网页中HTML标记的id属性的值,必须是唯一的。
  组合选择器
    多元素选择器:给多个元素加同一个样式,多个选择器之间用“,”隔开
  后代选择器
    给某个标签的某个后代元素加样式,选择器之间用空格隔开
  子元素选择器:给某个元素的子元素添加样式举例:div > h1.title{color:red;}
css尺寸属性
    width:元素宽度,一定要加px单位
    height:元素高度
css字体属性
    font-size:字体大小
    font-family:字体
    font-style:斜体,取值:italic
    font-weight:粗体,取值,bold
css文本属性
    color:文本颜色
    text-decoration:文本修饰线,取值:none(无),underline(下划线),overline(上划线),line-through(删除线)
    text-align:文本水平对齐方式,取值:left,center,right
    line-height:行高,可以用固定值,也可以用百分比
    text-indent:首行缩进
    letter-spacing:字间距

CSS选择器——基本选择器(单个选择器)
    1,通配符“*”:将匹配所有的HTML标记,只要<body>中存在的标记都会生效。
    2,标签选择器:对应于HTML标记,有什么样的HTML标记,就有什么样的标签选择器。如:p{color:red;}
    3,类选择器:给HTML标记中,class属性值相同的元素,添加样式。命名必须以“.”开头。如:.news{}
    4,Id选择器:给HTML标记中,具有id属性的元素,添加样式。唯一性。命名以“#”开头。如:#news{}  
CSS选择器——组合选择器(多个选择器)
    1,多元素选择器:同时给多个元素添加样式,各个选择之间用逗号“,”分开。如:p,h1,#box{}
    2,后代元素选择器:给某个元素的所有后代元素,添加样式。用空格隔开。如:#box  h1{}
    3,子元素选择器:给某个元素的子元素添加样式。用“>”隔开。如:#box > h1{} 
一个超链接,有四个状态:
正常状态(:link):鼠标没放上之前链接的样式。
放上状态(:hover):鼠标放到链接上时的样式。
激活状态(:active):按住鼠标左键不松开的样式,这个状态特殊短暂。
访问过的状态(:visited):按下鼠标左键,并弹起,这时的样式效果。
    在平常工作中,会使用以下写法,来给链接加不同的样式:
    a:link, a:visited{ color:#444; text-decoration:none; }  //将“正常状态”和“访问过的状态”合二为一。
    a:hover{ color:#990000; text-decoration:underline; }  //“鼠标放上”单做一种效果
list-style:列表样式,取值:none。去掉项目符号或者编号前面的各种符号
    ul li{list-style:none;/*去除前面的符号*/}
css边框属性
    border-left:左边框线
        格式:border-left:粗细 线型 线的颜色
        线型:none(无线) solid(实线) dashed(虚线) dotted(点状线)
        举例:border-left:5px dashed red;
    border-right:有边框
    border-top:上边框
    border-bottom:下边框
    /*行内元素没有width和height属性
      块级元素才有width和height的属性
    */
 css内边距属性
    padding-left:左内填充距离,左边先到内容间的距离
    padding-right:右内填充距离,右边线到内容间的距离
    padding-top:上内填充距离,上边线到内容间的距离
    padding-bottom:下内填充距离,下边线到内容间的距离
    缩写形式
        padding:10px;//四个边的内填充分别为10px
        padding:10px 20px;//上下为10px,左右为20px
        padding:5px 10px 20px;//上为5px,左右为10px,下为20px
        padding:5px 10px 15px 20px; //循序是:上右下左(顺时针)
css外边距属性
    margin-left:左边线往外的距离
    margin-right:右边线往外的距离
    margin-top:上边线往外的距离
    margin-bottom;下边线往外的距离
    简写形式
        margin:10px;//四个外边距分别为10px
        margin:10px 20px;//上下外边距10px,左右外边距20px
        margin:5px 10px 15px;//上外边距5px,左右外边距10px,下外边距15px
        margin:5px 10px 15px 20px;//上右下左(顺时针方向)
css背景属性
    background-color:背景颜色
    background-image:背景图片 例:background-image:url(路径)
    background-repeat:背景平铺方式。取值no-repeat(不平铺),repeat-x(水平方向),repeat-y(垂直方向)
    background-position:背景定位,格式:background-position:水平方向定位,垂直方向定位
      英文单词定位:background-position:left|center|right  top|center|bottom;
      用固定值定位:background-position:50px 50px;//背景距离容器的左边50px,容器的顶端50px
      用百分比定位:background-position:50% 50%;//水平居中,垂直居中
      用混合定位:background-position:left 10px;//背景靠左边齐,距离容器顶端10px
    简写方式:
      background:背景色 背景图 平铺方式 定位方式
      举例:background:url(images/bg.gif) no-repeat center center;
      举例:background: #ccc url(images/bg.gif) no-repeat left 10px;
css浮动和清除
    float:让元素浮动,取值:left(左浮动),right(右浮动)
    clear:清除浮动,取值:left(清除左浮动),right(清除右浮动),both(同时清除上面的左右浮动)
  1、CSS浮动
  浮动的元素,将向左或向右浮动,浮动到包围元素的边上,或上一个浮动元素的边上为止。
  浮动的元素,不再占空间了,并且,浮动元素的层级要高于普通元素。
  浮动的元素,一定是“块元素”。不管它原来是什么元素。
  如果浮动的元素,没有指定宽度的话,浮动后它将尽可能的变窄。因此,浮动元素一般要定宽和高。
    一行的多个元素,要浮动一起浮动
  2、CSS清除浮动
  CSS清除浮动的功能有两个:(1)可以包围元素从“视觉上”包住浮动元素(2)清除之下的其它元素将恢复默认排版。
  有浮动,就得有清除。
    如果包围元素指定了高度了,那么可以不使用清除功能。
css优先级
    行内样式》id选择器》class选择器》标签选择器
display属性
  功能:规则网页元素如何显示的问题
  取值:none(隐藏),block(一块级元素显示),inline(以行内元素显示)
  block:可以实现将行内元素转换成块级元素
  inline:可以实现将块级元素转换成行内元素
overflow属性:当内容溢出时,该如何显示
  取值:visible(可见),hidden(隐藏),scroll(出现滚动条),auto(自动)
cursor光标类型
  取值:text(文本),help(帮助),wait(等待),pointer(手型)等。
css定位
  position:元素定位方式
    static:静态定位(默认状态,不定位);
    fixed:固定位置
    relative:相对定位
    absolute:绝对定位
  定位方式要与定位属性配合使用
    定位坐标:指定定位的元素,偏移目标元素多远的距离
    left:定位元素,距离目标元素左边的距离
    top:定位元素,距离目标元素上边的距离
    right:定位元素,距离目标元素右边的距离
    bottom:定位元素,距离目标元素下边的距离
 css表格属性
   border-collapse:表格边框线合并,取值:collapse
全局css设置
1、清除所有的标记的内外边距
    body,ul,li,a,img,p,input{ margin:0; padding:0; }
2、去除项目符号或编号前面的符号
    ul,ol,li{ list-style:none; }
3、全局链接效果
    a:link , a:visited{color:#444;text-decoration:none;}
    a:hover{color:red;}
4、网页中所有的文字大小颜色
    body{ font-size:12px; font-family:宋体; color:#ccc; }
5、去除图片的链接边框线
    img{border:0;}
6、全局的类样式
    .floatL{ float:left; }
    .floatR{ float:right; }
    .clear{clear:both;}
    .blank10{ height:10px; clear:both; }
    .red{ color:red; }
    .blue{ color:blue; }
最后修改:2020 年 12 月 10 日 08 : 25 PM
对您有帮助的话,请赏包辣条吧 ^~^