DAY3学习笔记

来源：互联网发布：广州广大淘宝培训编辑：程序博客网时间：2024/05/19 03:19

行内样式：<body style=”color:#F00”>sss</body>

内嵌式：在head内加一个style标签

     &lt;style type="text/css">            p{               color:#F00;            }            &lt;/style>

外链式（用的较多）：创建css文件，与html文件分开，通过link标签引用css中的设置

第四种方式是：@import：url(1.css) 用的少，几乎不用，该方式是加载完html
才加载css，当html中有大文件时，加载时页面布局会有问题

以上三种方式按优先级排列，越往下越低（即按就近原则，越近优先级越高）

选择器：最常用的有以下三种
1.标签选择器：

                    p{                      color：#F00;                        }

2.class选择器：

.cl{        color:#F00;    }

3.id选择器(优先级最高）:

#dl{            color:#F00;    }

区别：标签选择器设置了以后，文件中所有的p里面都内容都是这个设置
class选择器可以共用，即可以多个元素使用。可以用<p class="c1 c2"></p>这种格式，但c1会被c2覆盖掉
而id只可以单个元素使用，不可以有多个元素都使用同一个id

关于选择器，还有以下格式：

body .cl{                }代表body下的元素，注意中间有个空格.cl1,.cl2{              }代表什么什么下的cl1和cl2选择器

其他的选择器：1，*{}：表示页面中的默认的所有标签。。。（css注释方式是/*方式）2，.cl+p{}:表示紧随用了该类的元素的下一个同级元素使用该类的设置；即：                <p class="cl">nihao</p>                    <p>hahahahaha</p>            上述代码中，nihao不会应用cl的设置，而是hahahahaha会应用改设置            但要求两个元素要在同一个级内（如在同一个div内），不同级不可以。3，.cl~p{}:后面的所有的同级元素应用该类设置、4，div>p{}:页面内所有div下的子元素p应用改设置    也可以写成.cl>p{}，表示用了该类的元素的子元素中的p元素内容使 用该设置    >表示子元素中的p标签，要求p元素是该元素的子元素，多级子元素不行    而.cl p{}表示用了该类的元素内的所有p标签，包括多级子元素中的p标签5，超链接：a[title]{                    color:#F00;                    }表示设置了title内容的a标签。即设置了title属性的a标签会使用该设置

选择器权重：
内联（style写在标签内）》id》class/attribute》tab/pseudo-class

css常用属性：
color；字体颜色
font-size；字体大小
font-family;字体
font-weight:字体的粗细
width:
height:
border:边框
border:solid 1px red;

不是所有的属性都会被子元素继承，只有字体相关的属性才会被继承

超链接相关属性：
link：一开始的状态
用法： a:link {color:blue;font-size:36px;}
visited:点击后的样式
用法： a:visited{color:black}
hover:表示鼠标移到该连接上的样式
用法： a:hover{color:white;}
active:表鼠标点击那一刻的链接状态
用法： a:active{}
css中的love hate原则：
使用上面超链接属性时，必须按照上面的相对顺序，不然没效果

table相关属性：

    table{            width:500px;            height:500px;        }        th,td{            border:solid 1px red;            text-aligin:center;        }

    以上写法，表格中每一栏的边框是分开的，要想重合，    在table中加    `border-collapse:collapse;`

边框与背景：
边框：border

#d1{            width:100px;            height:100px;            border:solid 1px #F00;        }

    边框border可以拆分成三个属性：border-style,border-width,border-color;

背景：
background-image:url(1.jpg);
background-repeat:no-repeat;//该语句控制图片背景的铺满方式，no-repeat时默认原大小在左上角
background-position:10px 20px; //该语句控制背景图片的位置，以左上角为坐标，10为x坐标，20为y坐标，也可以用百分比表示
background-color:#F00; //背景颜色
background-attacthment:fixed; //该属性控制背景图片是否一直显示在页面上（不随着滚动条的拖动而改变位置）
以上属性可以合并成一条：
background:blue url(i.jpg) no-repeat fixed 10px 20px;

*隐藏，滚动条屏，z-index属性：
#d1{
width:100px;
height:200px;
border:solid 1px red;
overflow:hidden; //该属性是表示当内容超出容器时怎么处理超出的部分，hidden表示将超出的部分隐藏，而auto表示超出时出现滚动条，scroll表示不管超不超出都有滚动条。
怎么样让一个div隐藏呢
display:none; //该属性让div隐藏，且隐藏后该div不占位置
//另一种方式：
visibility:hidden; //该方式也使其隐藏，不过仍占空间
}
c1{
width:100px;
height:200px;
border:solid 1px red;
//div作为块级元素，会单独占满一行，如何摆脱这个设定呢
position:absolute;//该属性会使div可以叠在一起，脱离文本流
}
z-index:2; //该属性实际相当于图层的层次，数字越大越在上面；
鼠标，列表，垂直居中属性：
cursor属性：当鼠标放在该文字上时鼠标的形状（光标样式）
列表的属性：
例子：

    li{                        list-style-type:circle;//前面序号的                    样子，包括实心点空心点等。                        list-style-image:uir(1.jpg);  //把图片做列表的标号                    }

        图片的位置：                img{                    vertical-align:middle;} //当在一行文字中插入一张图片时，控制图片的位置，包括text-top,text-bottom                                            //该属性只能用在行内元素                }

行内元素和块元素：
块元素：包括div（布局设置用的），p,h1-h6,form,menu,pre,table,三种列表
特点： 1，块级元素的内容默认在块的左上角
2，块元素单独占满一行

行内元素：
特点： 1，没有单独占满一行
2，默认情况下，不受高度和宽度属性影响
常见的行内元素：
span,a,label,img,textarea,strong,input,select,

    行内元素和块级元素的转化：        块转到行：                使用display:inline;语句，该语句实现块到行的转换        行转到块：                使用display:block;语句。        display:inline-block;//该语句描述的元素同时有块元素和行元素的特点。如受高和宽的影响，又可以并排在同一行

0 0