java基础--css

最新推荐文章于 2022-01-23 22:02:38 发布

song_lf

最新推荐文章于 2022-01-23 22:02:38 发布

阅读量218

点赞数

分类专栏：培训日志 css html

本文链接：https://blog.csdn.net/song_lf/article/details/51614179

版权

培训日志同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

1 css概述

作用：实现统一的定义页面元素的外观

css(cascading style shtte):级联（层叠）样式表

注释：/**/

2 使用方式

内联样式：只能解决某个元素的样式--可重用和可维护度差<元素style="样式1：值；样式2：值；..."

<h1style="color:red;background-color:gray;">h1text:字体颜色和背景色(内联方式)</h1>

<h1>另外一个h1</h1>

内部样式表

a. 在head里添加style标记

选择器｛样式声明：｝

例如：<style>

color:blue;font-size:20pt;

}

</style>

<body><p>ptext</p></body>

外部样式表：实现真正的数据（页面）和表现（样式）分离,实现可内容与表现分离的提高－－建议使用

a.新建一个css文件，定义样式

b.html页面的head里link引入

<linktype="text/css"rel="stylesheet"href="style.css">

3 语法

内联样式：声明；

内部或者外部样式：

选择器｛样式声明；｝

注释/**/

4 优先级别，就近优先，不同取并集，相同重复按照优先级

默认外观（由浏览器）

内联（最高），高于内部或者外部

内部和外部，以最后一次定义的为准

5 选择器的定义：样式定义一个名称，便于元素使用它

a 元素选择器：以html中元素的名称定义

div{

border:1pxsolid black; margin:0px auto; padding:0px;

}

b 类选择器

<p class=”aa’>jsdfs</p>

.aa{

}

c 分类选择器：同一种元素里作细分

input.txt{border:1px solid red;}

input.btn{border:1px dottedrgb(27,42,152);}

c ID选择器

#tool{

width:100%;height:61px;

}

e 分组选择器

#header,#footer{

width:960px;

}

f 派生选择器：使用元素的层次位置作为选择

div a{color:green;}

g 伪类选择器：定义某元素在不同状态下的样式

a:hover{font-size:15pt;}

h2:hover{border:3px solidyellow;}

:link--超级连接没有被点过

:active--激活

:focus--获得焦点

:hover--悬浮

:visited--超级连接访问过

6 各种样式

6.1 单位

尺寸的单位

颜色的单位

尺寸相关的属性：width/height/overflow

6.2 边框

margin:外边距

padding：内边距

padding:10px--所有边距

padding:10px 20px－－两个值，第一个上下

padding:10px 20px 30px 40px--上右下左

margin:10px auto;

统一设置各边(简写)：border:width style color

6.3 背景

background-color:颜色；

background-image:url(a.jpg);

background-repeat:repeat/no-repeate/repeat-x/repeat-y;

background-position:5px 10px;

6.4 文本

字体颜色 color

字体大小 font-size

文本的水平对齐 text-align

字形 font-family

粗体 font-weight:normal/bold;

下划线 text-decoration:none/underline;

行高 line-height

6.5 表格：表格特有的属性

表格边框合并 border-collapse:separate/collapse;

vertical-align:top/middle/bottom;

6.6 浮动：元素脱离原有的布局，浮起来，停靠在包含框的左侧或者右侧

float:none/left/right;

clear:none/left/right/both;清除浮动的影响

6.7 display:设置元素的显示方式

块级元素和行内元素：行内元素而言，width/height无效，大小自适应

html中的元素本质的定义：或者为行内或者为块级

可以使用display样式属性修改其元素类型：

display:none/block/inline;

6.8 列表样式（列表所特有）

list-style-type:none/disc/...;设置列表项的标识

6.9 定位

默认情况下,定位方式：流模式－－－一个层上

修改方式，实现多个层

方式一：float（居左或者居右）

方式二：position(灵活的定位)

position:static/relative/absolute/fixed;

相对定位：position的值为relative,然后使用偏移属性和堆叠属性设置具体的位置－－相对于原有的位置发生偏移，常用于定位的位置与操作相关时

绝对定位：

偏移属性：left/top/bottom/right

堆叠属性：z-index:value;

技巧一：为某个元素定义两种样式，用于不同的情形

％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％

<bodystyle="background-color:rgb(256,229,220)">

<h1style="color:rgb(42,79,24);background-color:gray;font-size:21pt;">(内联方式)</h1>

<h1>没有加内联方式的h1</h1>

<pclass="newstyle">类选择器和分组选择器</p><p>没有样式的P</p>

<inputclass="txt" type="text"/>//分类选择器

<inputclass="btn" type="reset"/>//分类选择器

<h2>定义了伪类选择器</h2>

<h6id="pageTitle">id选择器和分组选择器</h6>

<ahref="#">定义了伪类选择器</a>

<div>

<ahref="#">伪类 div派生选择器</a><br><a href="#">伪类 div派生选择器</a><br>

<a href="#">伪类 div派生选择器</a><br><ahref="#">伪类 div派生选择器</a><br>

</div>

<h2style="color:rgb(255,0,0)">之前定义的h2样式中颜色被红色替代且定义了伪类选择器</h2>

<h2style="color:rgb(0,255,0)">之前定义的h2样式中颜色被绿色替代且定义了伪类选择器</h2>

<h2style="color:rgb(0,0,255)">之前定义的h2样式中颜色被蓝色替代且定义了伪类选择器</h2>

<divstyle="width:170px;height:270px;border:1px solidblue;overflow:auto">将此处文本内容写入前边定义的方框中，文本长度比较长如果不定义overflow的话，内容会超过所定义的方框，定义的话就会产生滚动条，防止内容超出所定义的边框</div>

css样式

h3{ color:green;font-size:20pt; }

.newstyle{ font-size:30pt;color:red;}

/*分类选择器：同一种元素里做细分*/

input.txt{border:1px solid red;}

input.btn{border:1px dottedrgb(27,42,152);}

#pageTitle{font-size:30pt;color:purple;}

.newstyle,#pageTitle{border:1pxsolid black;}

div a{color:green;}

a:hover{font-size:15pt;}

h2:hover{border:3px solidyellow;}

％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％％

song_lf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java基础--css

1 css概述作用：实现统一的定义页面元素的外观css(cascading style shtte):级联（层叠）样式表注释：/**/2 使用方式内联样式：只能解决某个元素的样式--可重用和可维护度差h1text:字体颜色和背景色(内联方式) 另外一个h1内部样式表a. 在head里添加style标记选择器｛样式声明：｝例如： p{
复制链接

扫一扫