学习web前端历程（十）

最新推荐文章于 2024-06-19 21:06:55 发布

l123zmj

最新推荐文章于 2024-06-19 21:06:55 发布

阅读量164

点赞数 1

文章标签：文本属性列表属性 css属性选择器链接伪类选择器 css3新增选择器

本文链接：https://blog.csdn.net/l123zmj/article/details/98187984

版权

文本属性、列表属性、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>

l123zmj

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
学习web前端历程（十）

文本属性、列表属性、CSS3新增选择器、CSS属性选择器、伪类选择器（链接伪类选择器）一、文本属性1.text-align内容方式对齐，针对于元素的内容属性值描述left左边center中间right右边 p{ text-align: center; /*内容方式*/ text-...
复制链接

扫一扫