Java 新手学习 CSS样式列表排版格式布局

时间 2019-11-11

标签 java 新手学习 css 样式列表排版格式布局栏目 Java 繁體版

原文原文链接

1，样式表分为内联样式表内嵌样式表外部样式表三种。浏览器

内联样式表是直接写在标签里面的好比 <p style=“”></p> <div style=""></div>布局

内嵌样式表是必须写在head 标签里面的好比 spa

<style>blog

p{样式}ci

</style> 只针对body 里的p 标签改变样式it

也能够是io

<style>class

div{样式(样式能够本身设定）好比 width:200px; height:50px; border:1px solid red; top:10px; left:20px; 那么div层标签的效果会是宽200高50 边框线为1像素实线红色实线的框，固然也能够添加更多的样式效果在里面}引用

</style>只针对body里的div标签改变样式float

这是用标签名作的选择器好比p层标签、div层标签

还有一种class选择器都是“."开头的好比

.(点后面随便起名字方便记住就行可是不能单独用数字命名能够字母加数字但数字不能够在开头列如 a1 但不能是 1a)

{样式}</style></head>

这种选择器在head标签里写完了要在body里的层标签里引用好比

<body>

<div class="上面点后边起好的名字”></div>这样div层标签就会执行class的样式指令了

<p class=“”></p>这个p标签也会执行class的指令

</body> class选择器能够重复使用也就是说能够同时被多个标签引用

还有一种ID选择器这个在head的标签里以#开头好比

#(名字）{样式}</style></head>

<body>

</body> 这种选择器的应用方式跟class同样可是class能够被重复使用 id不能重复使用也就是说#ab 只能在body里出现一次若是是不一样名字的# 能够被屡次使用

好比#aa 能够跟#bb 同时出如今body里面

选择器种类里还有三种符合选择器

1）用，逗号隔开表示并列好比

p,span,div{样式}

</style></head> 这样p标签span标签和div标签能够同时执行样式的指令

2）用空格隔开表示后代好比

div p{样式}

</style></head>只有div标签里的p标签执行此命令好比

<body>

</body>这中状况下是执行 div p 样式指令的

3）（.)表示筛选这种状况跟用空格功能基本同样

格式与布局

1）position:fixed 锁定位置是相对于浏览器的

2）position：absolute 是绝对位置这个有两种状况

一种是外层没有position：absolute或者是relative的状况下，建立的div是相对于浏览器定位的

另外一种是外层有position：absolute或者relative，那么div就会相对于外层的边框定位

3）position：relative 是相对于默认位置的定位（绝对定位是在页面上面进行定位，相对定位是真实的在页面里面占有某一块区域，有上下左右值的时候只是进行

形状上的平移，真实占有的位置不变）

分层 z-index 在z轴方向分层，层数越高越不容易被盖住， z-index层数默认为1

float：left right

overflow：hidden；为超出部分隐藏 overflow：visible；显示

超连接的样式

<style>

a:link 每点击是原来的样子

a:visited 访问过的连接样式

a:hover 鼠标指向是的样式也就是把鼠标放在上面显示的样式

opacity 透明度

Java 新手学习 CSS样式列表 排版 格式布局

Java 新手学习 CSS样式列表排版格式布局