我的Java学习历程（CSS篇）

来源：互联网发布：java系统架构师面试题编辑：程序博客网时间：2024/06/05 23:04

CSS3

引用方式

1. 外部<link rel type href= />

2. 内嵌 style type

3. 行内style=””

4. 导入 @import url(‘..’)

5. 优先级

a) 行内>> 内嵌=外部=导入

选择器

元素所有这个选择器名称的元素

类 id选择器伪类选择器属性选择器组合选择器

1. 权重:

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表类，伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

div{}
.class名{} class类选择器
#id名{} ID选择器

input[type],属性

input[type='text'],

input[type*='t'], type属性包含“t”字母的

input[type^='t'], “t”字母开头的

input[type$='t']{} “t”字母结尾的

Input:checked{}

Input:enable{}

Input:disable{}
div a{} 包含
div>a{} 子选择

Div~a{} 之后同级
div.a{} div中 class为a的元素

div,a{}

div:first-child{} 此父元素中第一个子元素
div:last-child{}
div:nth-child(odd){} 奇数（even 偶数）
div:nth-last-child(1){} 倒数第一个
span:first-of-type{} 同类型元素的第一个
span:last-of-type{}
span:nth-of-type(1){}
span:nth-last-of-type(1){}
div:link{}
div:hover{}
div:active{}
div:visited{}
div:first-letter{}
div:first-line{}
div:before{}
div:after{}

Div,p,a,dd,dl,dt{}

盒子模型

margin: 0;外补丁  top,bottom,left,rightn  设置元素之间的边距可以用来设置元素的位置padding: 0;  内补丁  元素内部文本或子元素距本身边框的距离width: 0;min-width: 0;max-width: 0;height: 0;min-height: 0;max-height: 0;border: none;

字体文本样式

Font：复合属性 24px/1.5(100%)(12px) 表示字符的行高

font-size: 14px;               font-family: '宋体';font-style: italic;normal oblique  设置 斜体 font-weight: 900; 加粗text-decoration: underline,none,blink,line-through,overlinetext-transform: capitalize,none,uppercase,lowercase  设置英文单子 首字母大小写text-align: center; 文本水平对齐方式line-height: 30px;  字体行高text-indent: 2em;首行缩进vertical-align: middle;  调整字体同一行内的行内元素的位置color: red;text-shadow: 10px 10px 1px red;overflow: auto（滚动条）;scroll(基本没用);hidden(剪掉)  解决超出文本框white-space: nowrap强制不换行;pretext-overflow: ellipsis; 单行文字   一定要有上面2个标签才能用word-wrap: break-word; 英文换行word-spacing: 10px;单词间间距letter-spacing: 10px;字符间距

背景

background-color: red;background-image: url('');/*多张背景图片*/background-position: center;background-repeat: no-repeat;  background-attachment: fixed;background-clip: content-box;

边框

border-width: 10px;border-color: red;border-style: solid; 边框的线型border-radius: 10px;border-image: url('') 10/10px stretch;

border-collapse: collapse

定位

left: 10px;right: 10px;top: 10px;bottom: 10px;position: absolute, fixed, relative; 绝对定位    relative(作为子元素的绝对定位参照物

z-index: 10;用来设置绝对定位中有覆盖元素时哪个处于最上面float: left;浮动clear: both; 清除此元素左右两边的浮动

其他

display: block,inline;  块状元素变行内反之亦然    none  隐藏visibility: hidden;opacity: 1;  透明度cursor: pointer; 鼠标形状list-style:none;unicode-bidi: bidi-override;direction: rtl;

resize:none;overflow:auto;

-ms-微软

-moz-火狐

-o-opert

-webkit-谷歌

CSS导入服务器字体

@font-face {    font-family: f1;    src: url(fonts/1.ttf);}

Css分辨率兼容

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" type="text/css" href="css/css1.css"/>    <style type="text/css">        * { margin: 0; padding: 0; font: 20pt/50px '微软雅黑'; list-style: none; }        p:first-of-type { width: 100px; height: 180px; left: 0; top: 200px; position: absolute; background: red; }        p:last-of-type { width: 100px; height: 180px; right: 0; top: 200px; position: absolute; background: green; }        .divbody { width: 960px; min-height: 600px; border: 5px solid blue; margin: 0 auto; }        .div2 { width: 460px; height: 150px; background: red; float: left; margin: 10px; }        .div3 { width: 300px; height: 150px; background: blue; float: left; margin: 10px }        .div4 { width: 220px; height: 150px; background: green; float: left; margin: 10px }        /* 1920 1600 1366 1280 1024 800 500 */        @media screen and (min-width: 500px) {            .divbody { width: 250px; min-height: 600px; border: 5px solid blue; margin: 0 auto; }            .div2 { width: 230px; height: 150px; background: red; float: left; margin: 10px; }            .div3 { width: 230px; height: 150px; background: blue; float: left; margin: 10px }            .div4 { width: 230px; height: 150px; background: green; float: left; margin: 10px }            }        @media screen and (min-width: 800px) {            .divbody { width: 540px; min-height: 600px; border: 5px solid blue; margin: 0 auto; }            .div2 { width: 250px; height: 150px; background: red; float: left; margin: 10px; }            .div3 { width: 160px; height: 150px; background: blue; float: left; margin: 10px }            .div4 { width: 115px; height: 150px; background: green; float: left; margin: 10px }            }        @media screen and (min-width: 1024px) {            .divbody { width: 800px; min-height: 600px; border: 5px solid blue; margin: 0 auto; }            .div2 { width: 380px; height: 150px; background: red; float: left; margin: 10px; }            .div3 { width: 245px; height: 150px; background: blue; float: left; margin: 10px }            .div4 { width: 180px; height: 150px; background: green; float: left; margin: 10px }            }        @media screen and (min-width: 1280px) {            .divbody { width: 960px; min-height: 600px; border: 5px solid blue; margin: 0 auto; }            .div2 { width: 460px; height: 150px; background: red; float: left; margin: 10px; }            .div3 { width: 300px; height: 150px; background: blue; float: left; margin: 10px }            .div4 { width: 220px; height: 150px; background: green; float: left; margin: 10px }            }        @media screen and (min-width: 1366px) {            .divbody { width: 960px; min-height: 600px; border: 5px solid blue; margin: 0 auto; }            .div2 { width: 460px; height: 150px; background: red; float: left; margin: 10px; }            .div3 { width: 300px; height: 150px; background: blue; float: left; margin: 10px }            .div4 { width: 220px; height: 150px; background: green; float: left; margin: 10px }            }        @media screen and (min-width: 1600px) {            .divbody { width: 1360px; min-height: 600px; border: 5px solid blue; margin: 0 auto; }            .div2 { width: 660px; height: 150px; background: red; float: left; margin: 10px; }            .div3 { width: 432px; height: 150px; background: blue; float: left; margin: 10px }            .div4 { width: 320px; height: 150px; background: green; float: left; margin: 10px }            }        @media screen and (min-width: 1920px) {            .divbody { width: 1600px; min-height: 600px; border: 5px solid blue; margin: 0 auto; }            .div2 { width: 660px; height: 150px; background: red; float: left; margin: 10px; }            .div3 { width: 432px; height: 150px; background: blue; float: left; margin: 10px }            .div4 { width: 320px; height: 150px; background: green; float: left; margin: 10px }            }    </style>    <title>首页</title></head><body><div class="divbody">    <div class="div2"></div>    <div class="div2"></div>    <div class="div3"></div>    <div class="div3"></div>    <div class="div3"></div>    <div class="div4"></div>    <div class="div4"></div>    <div class="div4"></div>    <div class="div4"></div>    <address style="clear: both"></address></div></body></html>

阅读全文

0 0