澳门新浦京8455comday03

由于每个人调用的css不同,大家可以根据自己的需要修改css

请选择下面的下拉菜单测试换肤效果

B今天掌握了什么

1.1css背景
背景颜色:background-color

背景图片:backgorund-image

背景重复:background-repeat

背景位置:background-position: x y 

以上可以简写为:
background: color image repeat  position

背景吸附:background-attachment:fixed | scroll

背景图片大小:
background-size: x y;
1.2css文本
color:设置字体的颜色
body {color:red;}
颜色是通过CSS最经常的指定:
十六进制值 - 如: #FF0000
h1 {color:#00ff00;}
一个RGB值 - 如: RGB(255,0,0)
h2 {color:rgb(255,0,0);}

text-align:文本对齐方式
text-align: right|left|center

text-decoration:文本修饰
text-decoration: underline|overline|line-through(上划线/下划线/中划线)

text-transform:文本转换
text-transform:uppercase|lowercase|capitalize(大写字母、小写字母/首字母大写)

text-indent:文本缩进
1.3css字体
font-family:字体
p{font-family:Helvetica,Microsoft YaHei}
//font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体

font-size:字体大小

font-style:字体样式
normal | italic

font-weight:字体粗细
normal | bold | lighter

line-height:行高
1.4css链接

这四个链接状态是:

a:link - 正常,未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

*若单独设置几个链接,必须遵守如下规则:

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
1.5css列表样式(针对ul)
list-style:none;

list-style-type:circle|square

list-style-image:url("xxx")
1.6边框
border-width : 边框的宽度

border-style: 边框的样式

border-color :边框的颜色

//以上可以简写成
border: width style color
p{border:1px solid #333 }

//*边框-单独设置各边
p
{
    border-top-style:dotted;
    border-right-style:solid;
}
1.7表格
border-collapse:属性设置表格的边框被折叠成一个单一的边框;
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value    //跨越的列
rowspan:value   //跨越的行
1.8轮廓属性
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
p{outline:1px solid pink}
1.9透明
opacity:透明度
一般取值(o-1);

visibility:hidden/visible

解决方法:

css.css css1.css css2.css css3.css
选择样式单文件 varcsss=newArray(); csss[0]=”css.css”;
csss[1]=”css1.css”; csss[2]=”css2.css”; csss[3]=”css3.css”; vari;
for if document.write(“”+csss[i]+”样式单文件”); else
document.write(“”+csss[i]+”样式单文件”);

1、css基本样式

1.1css背景
背景颜色:background-color

背景图片:backgorund-image

背景重复:background-repeat

背景位置:background-position: x y 
//背景位置有两个参数,第一个参数表示背景图片离盒子x轴的距离,y表示背景图片离盒子y轴的距离
//参数可以传递left|right|top|bottom|center

以上可以简写为:
background: color image repeat  position

//HTML
<div>hello world</div> 

//css
<style>
div{
 width:500px;
 height:100px;
 background:pink url(images/logo.png) no-repeat   100px 50px;
}
</style>

背景吸附:background-attachment:fixed | scroll

背景图片大小:
background-size: x y;
//x表示宽度,y表示高度
background-size:cover;
//此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;
1.2css文本
color:设置字体的颜色
body {color:red;}
颜色是通过CSS最经常的指定:
十六进制值 - 如: #FF0000
h1 {color:#00ff00;}
一个RGB值 - 如: RGB(255,0,0)
h2 {color:rgb(255,0,0);}

text-align:文本对齐方式
text-align: right|left|center

text-decoration:文本修饰
text-decoration: underline|overline|line-through

text-transform:文本转换
text-transform:uppercase|lowercase|capitalize

text-indent:文本缩进
1.3css字体
font-family:字体
p{font-family:Helvetica,Microsoft YaHei}
//font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体

font-size:字体大小

font-style:字体样式
normal | italic

font-weight:字体粗细
normal | bold | lighter

line-height:行高
1.4css链接

这四个链接状态是:

a:link - 正常,未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

*若单独设置几个链接,必须遵守如下规则:

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
1.5css列表样式(针对ul)
list-style:none;

list-style-type:circle|square(空心圆、方块)

list-style-image:url("xxx")
1.6边框
border-width : 边框的宽度

border-style: 边框的样式

border-color :边框的颜色

//以上可以简写成
border: width style color
p{border:1px solid #333 }

//边框-单独设置各边
p
{
    border-top-style:dotted;
    border-right-style:solid;
}

//HTML
<p>
   hello world
</p>
//CSS
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-top-width: 5px;
    border-right-width: 5px;
    border-top-color: red;
    border-right-color: green;
    width: 50px;
    height: 50px;
}
1.7表格(了解)
border-collapse:属性设置表格的边框被折叠成一个单一的边框;
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value    //跨越的列
rowspan:value   //跨越的行

例子:

//HTML
制作表格:
<table>
    <tr>
        <th>商城</th>
       <th>电子产品</th>
    </tr>
    <tr>
        <td>天猫商城</td>
       <td>iphone</td>
    </tr>
    <tr>
        <td>京东商城</td>
       <td>小米手机</td>
    </tr>
  </table>

//HTML
跨越的行:
<table>
    <tr>
      <th rowspan="3">商城</th>
      <td>衣服</td>
     <td>电脑</td>
    </tr>
    <tr>
        <td>鞋子</td>
       <td>手机</td>
    </tr>
    <tr>
        <td>裤子</td>
        <td>眼睛</td>
    </tr>
</table>

//HTML
跨越的列:
<table>
    <tr>
        <th colspan="2">商城</th>
    </tr>
    <tr>
        <td>天猫商城</td><td>iphone</td>
    </tr>
    <tr>
        <td>京东商城</td><td>小米手机</td>
    </tr>

//HTML
有间隔的table:
<table>
    <tr>
       <th>商城</th>
       <th>电子产品</th>
    </tr>
    <tr class="one" ></tr>
    <tr>
       <td>TMALL</td>
       <td>iphone</td>
    </tr>
    <tr class="one"></tr>
    <tr>
       <td>JD</td>
       <td>ipad</td>
    </tr>
</table>

//css
   table{
            border-collapse: collapse;
            width:300px;
            text-align: center;
        }
        table,td,th{border:1px solid #333}
        tr{height:50px;}
1.8轮廓属性(不怎么用)
//轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
p{outline:1px solid pink}
1.9透明
opacity:透明度
一般取值(o-1);

visibility:可见度
visibility:hidden(事物存在,但是隐藏了)
visibility:visible(事物可以看见)
visibility:hidden 与 display:none的区别
visibility:hidden(事物存在,但是隐藏了)
display:none(事物确确实实不存在了)

overflow:hidden(溢出:隐藏)

打开shCoreDefault.css文件,找到对.syntaxhighlighter
textarea的定义,在最后加上一句:word-break:break-all
!important;就ok了,意思是让代码强制换行显示。

A今天学到了什么

2、css样式的继承

继承:是子元素对父元素的继承
2.1width和height
width:
如果子元素不设置宽度,默认情况下继承父元素的宽度

height:
如果父元素不设置高度,默认情况下父元素继承子元素的高度
2.2css可以继承的属性
文本相关属性:
color:
//字体颜色
text-align:left/right/center
//文本对齐方向
text-decoration: underline|overline|line-through
//文本修饰
text-indent:
//文本缩近
text-transform:uppercase|lowercase|capitalize
//文本转换

字体相关属性:
font-family:Helvetica,Microsoft YaHei
font-style:
//字体样式
font-size:
//字体大小
font-weight:
//字体粗细
line-height:
//行高

列表相关属性:list-style

表格相关属性:border-collapse

其他属性:
cursor:
//光标
visibility
//可见度

2、css样式的继承

继承:是子元素对父元素的继承
2.1width和height
width:
//如果子元素不设置宽度,默认情况下继承父元素的宽度

height:
//(特殊)如果父元素不设置高度,默认情况下父元素[继承子元素]的高度
2.2css可以继承的属性
文本相关属性:
color               //文本的颜色
text-align       //文本对齐的方向
text-decoration //文本修饰
text-indent  //文本缩近
text-transform  //文本转换(了解)

字体相关属性:
font-family,font-style,font-size,font-weight,line-height

列表相关属性:
list-style

表格相关属性:
border-collapse

其他属性:
cursor,visibility

C今天没有掌握什么

全部掌握了

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图