学习web前端历程(十)
文本属性、列表属性、CSS3新增选择器、CSS属性选择器、伪类选择器(链接伪类选择器)
一、文本属性
1.text-align
内容方式对齐,针对于元素的内容
属性值 | 描述 |
---|---|
left | 左边 |
center | 中间 |
right | 右边 |
p{ text-align: center; /*内容方式*/ text-align: right; text-align: left; }
注意:
p是块元素,left、right、center会作用于整个行
2.text-decoration
指定文字有无装饰,默认值为none
属性值 | 描述 |
---|---|
underline | 指定文字的装饰是下划线 |
overline | 指定文字的装饰是上划线 |
line-through | 指定文字的装饰是贯穿线,类似于删除标签 |
text-decoration: none; /*有无装饰文字*/ text-decoration: underline; text-decoration: overline; text-decoration: line-through;
3、text-transform
设置对象中的文本的大小写(但是用的不多)
默认值 none (无转换)
属性值 | 描述 |
---|---|
capitalize | 第一个单词的首字母大写 |
uppercase | 全部字母转换为大写 |
lowercase | 全部字母转换为小写 |
text-transform: capitalize; /*第一个单词的首字母大写*/ text-transform: lowercase; /*全部字母小写*/ text-transform: uppercase; /*全部字母大写*/
4.text-transform 文本缩进
文本缩进属性是用来指定文本的第一行的缩进
text-indent: 2em; 1em=16px;
注意:
1em和当前的字体大小相等,在浏览器中默认的文字大小时16px,1em默认是16px
文本属性完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性一</title> <style> h3{ text-align: center; /*内容方式*/ /*text-align: right;*/ /*text-align: left;*/ } p{ /*text-decoration: none;*/ /*有无装饰文字*/ /*text-decoration: underline;*/ /*text-decoration: overline;*/ /*text-decoration: line-through;*/ text-indent: 2em;/*文本的缩进*/ } span{ /*文本的大小写/* /*text-transform: capitalize;*/ /*第一个单词的首字母大写*/ /*text-transform: lowercase;*/ /*全部字母小写*/ text-transform: uppercase; /*全部字母大写*/ } </style> </head> <body> <span>Introduction to the front end</span> <h3>前端的简介</h3> <p>前端开发是创建Web页面或app等前端界面呈现给用户的过程。 前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 。 它从网页制作演变而来,名称上有很明显的时代特征。</p> <p> 在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主, 用户使用网站的行为也以浏览为主。 随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。</p> </body> </html>
5.word-wrap
设置当前行超过指定容器的边界时是否换行
word-wrap: break-word; //可设置过长的文本会自动换行
6.vertical-align
设置对象内容的垂直对齐方式(对内容里边的东西)
常用:
属性值 | 描述 |
---|---|
top | 头部 |
middle | 中间 |
bottom | 尾部 |
<style> p{ background: orange; } img{ width: 100px; vertical-align: middle; } </style> <body> <p>this is paragraph!!!<img src="images/lixian.jpg"/></p> </body>
7.line-height
设置对象的行高(不允许使用负值)
属性值 | 描述 |
---|---|
normal | 合理行间距 |
number | 数字,该数字与当前字体尺寸相乘来设置行间距 |
length | 固定行间距 |
我们一般用行高来使一行文字垂直居中,当行高等于高时,一行文字垂直居中
line-height: 200px;
文本属性完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性二</title> <style> /*p{*/ /* background-color: red;*/ /* width: 100px;*/ /* word-wrap: break-word;!*可设置过长的文本会自动换行*!*/ /*}*/ /*div{ height: 200px; background-color: red; font-size: 20px; line-height: 200px;}*/ div{ background: orange; height: 100px; } p{ background: orange; } img{ width: 100px; vertical-align: middle; } </style> </head> <body> <!--<p>Introductiontothefrontend</p>--> <!--<div>前端开发是创建Web页面或app等前端界面呈现给用户的过程。</div>--> <p>this is paragraph!!!<img src="images/lixian.jpg"/></p> </body> </html>
二、列表属性
1、list-style-image
设置列表项标记的图像(项目符号)
只有一个 url 属性(用来引导图片)
list-style-image: url("images/2.jpg")
2、list-style-position
设置列表项标记如何根据文本排列
属性值 | 描述 |
---|---|
outside | 项目符号在文本以外(默认) |
inside | 项目符号在文本以内 |
li{ list-style-position: inside; width: 100px; border: 1px solid red; }
为outside时显示:
为inside时显示:
3、list-style-type
设置列表项所使用的预设标记
属性值 | 描述 |
---|---|
none | 不使用项目符号 |
disc | 实心圆(相当于type=“disc”) |
circle | 空心圆 |
square | 实心方块 |
list-style-type: circle;
4、list-style
复合属性(把之前的属性都写在list-style中)
在选择器或者在li中都行(其属性的顺序可调换 用空格分隔)
list-style: url("images/21.jpg") inside disc; /*当找不到图片时,用后面的图形如disc来代替*/
列表属性完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表属性</title> <style> .text{ /*list-style-image: url("images/2.jpg");*/ /*list-style-type: circle;*/ /*list-style: url("images/2.jpg") inside disc;*/ list-style: url("images/21.jpg") inside disc; /*当找不到图片时,用后面的图形如disc来代替*/} li{ /*list-style-position: inside;*/ width: 100px; border: 1px solid red; } </style> </head> <body> <h3>大家喜欢吃什么水果?</h3> <ul class="text"> <li>苹果</li> <li>香蕉</li> <li>西瓜</li> </ul> </body> </html>
三、CSS3新增选择器
1.后代选择器(E F)
选择所有被E元素包含的F的元素,中间用空格隔开
格式: 选择器1 选择器2{ 属性1:属性值1; 属性2:属性值2; ... }
.parent span{ color: red; }
2.子代选择器(E>F)
选择所有作为E元素的直接子元素F,对子孙元素不起作用,用大于号表示
格式: 选择器1>选择器2{ 属性1:属性值1; 属性2:属性值2; ... }
.parent>span{ color: red; }
3.相邻兄弟选择器
选择紧贴在E元素之后的F元素,用加号表示,选择相邻的第一个兄弟元素
格式: 选择器1+选择器2{ 属性1:属性值1; 属性2:属性值2; ... }
p+span{ color: green; }
4.通用选择器(E~F)
选择E元素后的所有元素F,作用于多个元素,用~隔开
(和E元素之后平级的所有元素都被选中)
格式: 选择器1~选择器2{ 属性1:属性值1; 属性2:属性值2; ... }
p~span{ color: orange; }
CSS3新增选择器完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关系选择器</title> <style> /*.parent span{ color: red; } */ /* .parent>span{ color: red; }*/ /* p+span{ color: green; }*/ p~span{ color: orange; } </style> </head> <body> <!--<div class="parent"> <span>子元素span</span> <div> 子元素div <span>孙子代元素span</span> </div> </div> <span>外部元素span</span>--> <span>这是p上的span元素</span> <p>这是一个p元素</p> <span>这是第一个紧邻的span元素</span> <span>这是第二个span元素</span> <span>这是第三个span元素</span> </body> </html>
四、CSS属性选择器
1.E[att]
选择具有att属性的E元素
(不管属性名是什么,只要有属性就可以了)
a[href]{ color: red; /* a标签的属性 } //选择带有href属性的a标签
2.E[att=“val”]
选择具有属性(att)且具有属性值var的E元素(两种都要有)
p[class="p1"] { color: blue; }
3.E[att~=“val”]
选中有att属性的元素,且属性值列表中有一个符合val元素(只要包含val就被选中)
p[class~="p1"]{ color: orange; }
4.E[att^=“val”]
选择E元素中有att属性,且以"val"开头的元素
p[class^="p"]{ color: aqua; }
5.E[att$=“val”]
选择具有att属性且属性值为val结尾的字符串的E元素
p[class$="4"]{ color: blue; }
6.E[att=“val”]*
选择有att属性且属性值包含val的字符串的E元素
(不管在哪个位置,只要有就好)
a[href*="baidu"] { color: black; }
7.E[att|=“val”]
选择具有att属性并且属性值用“链接符”隔开的,以val开头的元素
div[class|="set"]{ color: blueviolet; }
CSS属性选择器完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css属性选择器</title> <style> /*a[href]{ color: red; /* a标签的属性 }*/ /* p[class="p1"] { color: blue; }*/ /* p[class~="p1"]{ color: orange; }*/ /*p[class^="p"]{ color: aqua; }*/ /*p[class$="4"]{ color: blue; }*/ /*a[href*="baidu"] { color: black; }*/ div[class|="set"]{ color: blueviolet; }</style> </head> <body> <!--<a href="">这是第一个a标签</a> <a href="">这是第二个a标签</a> <a href="">这是第三个a标签</a> <a href="">这是第四个a标签</a>--> <!--<p class="p1">这是第一个p标签</p> <p class="p2">这是第二个p标签</p> <p class="p3">这是第三个p标签</p> <p class="p4">这是第四个p标签</p>--> <!--<p class="p1 p2 p4">这是第一个p标签</p> <p class="p1p2">这是第二个p标签</p> <p class="p2 p4">这是第三个p标签</p>--> <!-- <a href="http://www.baidu.com">百度</a> <a href="#">空的链接</a> <a href="http://sina.com.cn">新浪</a>--> <div class="set-work">这是块级元素work</div> <div class="work-set">这是块级元素car</div> <div class="set-pen">这是块级元素pen</div> <div class="setpen">这是块级元素pen</div> </body> </html>
五、伪类选择器(部分)
通过冒号来定义,它定义了元素的状态(如点击按下、点击完等)
可以为元素的状态改样式,使元素看起来更动态
今天先学链接伪类选择器
1.E:link
设置超链接a在未访问前的样式(特值a标签)
a:link{/*未访问的链接*/ color: red; }
2.E:visited
设置a在其链接地址已被访问时的样式(特值a标签)
a:visited{/*已经访问过得链接*/ color: orange; }
3.E:hover
鼠标悬停(移动到)在元素上的样式(不限a标签)
a:hover{ /*鼠标移动到链接上*/ color: green; }
4.E:active
元素在鼠标按下时的样式(不限a标签)
a:active{ /*选定的链接 鼠标按下时的样式*/ color: aqua; }
注意:
链接伪类选择器主要针对超链接(a)
注意:其四者的顺序不可以更改,
链接伪类选择器代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接伪类选择器</title> <style> a{ text-decoration: none; font-size: 16px; font-weight: 800; } a:link{/*未访问的链接*/ color: red; }a:visited{/*已经访问过得链接*/ color: orange; } a:hover{ /*鼠标移动到链接上*/ color: green; } a:active{ /*选定的链接 鼠标按下时的样式*/ color: aqua; }* /*只留一个效果也可以:简写 留a:hover*/ </style> </head> <body> <!-- 链接伪类选择器主要针对超链接(a) 注意:其四者的顺序不可以更改, --> <a href="#">秒杀</a> </body> </html>
- 学习web前端历程(十四)
- 学习web前端历程(十三)
- 学习web前端历程(十二)
- web前端的学习历程
- 学习web前端历程(十一)
- 学习web前端历程(十六)
- web前端之html从零开始(二)----a标签学习,强化
- 我的前端学习历程
- web前端学习教程:大气炫酷html5响应式带第三方登录页面模板
- Web前端基础学习规划
- [web前端学习笔记]定位的盒子居中显示
- Web前端学习第十三天·fighting_HTML页面设计技巧总结(二)
- 小白学习Web前端开发大纲
- 刚入行的人员怎样去学习web前端呢?
- 前端学习(八十八) DOM-Web Worker(Dom)
- web前端学习资源分享
- WEB前端学习二 JS作用域和作用域链
- Web前端学习——JS基础一之DIV格式变换
- web 开发前端学习
- web前端学习笔记(CSS盒子的浮动)