• css个人总结


    1.什么是css,指的是叠层样式表,控制网页的的外观显示。

    2.引入css的三种方式,外部链接,内部链接,内联,分别的语法是,<link rel="stylesheec" type="text/css" href=""/>,<style type="tex/css"></style>,style="属性:值"

    3.css选择器,选择器就是要针对你要所改变的元素,而单独定义的样式,就常见的选择器:ID,CLASS,元素选择器,子元素选择器,群组选择器,相邻选择器,id选择器是唯一的意思是,只能定义一个id名相同的,class选择器,类选择器,可以为多个元素定义,id选择器和class选择器的区别在于,id是唯一的就像每个人的身份证一样只有一份号码是唯一的,而class就是像每个人的名字一样可以重复,元素选择器就是选泽要改变的元素标签名字,子选择器就是在当前元素后的子元素,群组合选择器就是选泽所有想改变的元素,相邻选择器就在当前同级元素的下一个元素。

    语法:<p id="one">这是一个段落</p>  相应的  css规则: #id{ 属性:值}

            <p class="two"></p><p class="two"></p>相应的css规则:.class{ 属性:值}

            <p>这是一个段落</P> 相应的css规则:p{属性:值}

           <div><p>这是一个段落奥</P></div>相应的css规则:div p{属性:值}

          <div><p>这是一个段落奥</P></div>相应的css规则:div,p{属性:值}

        <div>

    <p>这是一个段落奥</P>相应的css规则:div+div{属性:值}

      </div>

      <div>

    <p>这是一个段落奥</P>

      </div>

    4.字体样式

    字体的类型:font-family:  '';取值宋体,微软雅黑等、

    字体的大小:font-size:;通常以像素值px,其他的还有em ,百分比

    字体的粗细:font-weight:;取值bold粗体显示,normal正常

    字体的样式:font-style:;italic斜体,normal正常

    颜色;color;

    行高:line-height:;字体的行高,一行的高度不是距离。

    5.文本样式

    文本装饰:text-decoration:;取值有,line-through(贯穿线),underline(下划线),overline(上划线)

    文本对齐:text-align:;取值有,center(居中),left(左对齐),right(右对齐)

    文本缩进:text-ident:;取值单位px.em,百分比

    文本大小写:text-transform:;取值有 uppercase(大写) lowercase(小写) capitalize(首指母大写)

    文本的字间距:letter-sapcing:;取值单位px ,em ,百分比

    词间距:word-sapcing:;取值单位px ,em ,百分比

    6.边框

    border边框 边框的大小 类型 颜色 分别的设置

    border-width:; 取值是单位px   em  百分比

    border-style:; 取值是solid 实线  dashed虚线 等

    border-color:;取值颜色 ,可以是十六进制。

    7.背景 

    背景图片,背景是否被重复 ,背景的位置,背景是否滚动  分别是

    background:URL; 

    background-repeat:;取值有,repeat(重复) no-repeat(不重复) repeat-x(x轴重复) repeat-y(y轴重复)

    background-position:;取值可以是   center left right top

    background-scroll:;  取值是scroll   fixed

    可以简写;background: URL  repeat   position  scroll;

    8.超链接样式

    当我们鼠标移动到a标签上面,可以让他显示的样式,通过伪类来设置,不一定是a元素才有可以设置,在html中 任何元素可以都已设置伪类。语法:元素:hover

    当鼠标未访问的样式a:link;,当鼠标访问后的样式a:visited;当鼠标移动到的样式a:hover;当鼠标按下时的样式a:active;

    9图片

    图片大小:可以通过设置它的宽度 高度来设置。

    图片位置:通过text-align(水平居中),vertical-aligin(垂直居中)

    图片边框:通过border来设置它的边框

    10列表

    列表的样式:list-style-type:;取值none,circle,等

    列表图片:list-style-image:;

    11表格

    表格默认是没有边框的,我要通过border给它值

    12,盒子模型

    盒子模型分为:内容区,内边距,外边距,边框

    13布局

    浮动布局:通过float浮动块元素,注意清除浮动。

    定位布局:position来设置。然后设置。上右下左的值。

    固定定位:position:fixed/scroll

    静态定位:position:static

  • 相关阅读:
    CF453A
    各种算法的复杂度
    状压dp--P2622 关灯问题II
    笛卡尔树模板
    20201122模拟
    nm树上背包+二分--P4322 [JSOI2016]最佳团体
    20201121模拟
    20201119模拟
    斜率优化--P3195 [HNOI2008]玩具装箱
    网络流--最大流,最小割,费用流问题
  • 原文地址:https://www.cnblogs.com/yangyan9619ioio/p/5862385.html
Copyright © 2020-2023  润新知