Css学习笔记(二)

最新推荐文章于 2022-09-18 16:40:05 发布

mikw999

最新推荐文章于 2022-09-18 16:40:05 发布

阅读量363

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/mikw999/article/details/100921009

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Css外观属性

color:文本颜色

color属性用于定义文本颜色，其取值方式由3中
1，预定的颜色值，如red，green，blue等
2，十六进制，如#FF0000, #00FF00等，实际工作中十六进制最为常见
3，RGB代码，红色可以表示为rbg(255,0,0)

line-height:行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般为行高，line-height 常用属性值由三种分别是像素px，相对值em，
和百分比，一般用的最多的是px。

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的aglin对其属性。可使用值如下
left : 左
center：中
right: 右
等

text-indent :首行缩进

text-indent属性踊跃设置首航文本的缩进，其属性值可为不同单位的数值，em字符宽度的倍数，或者相对于浏览器窗口宽度的%，允许使用负值，建议使用em为单位
1 em 就是一个子的宽度，如果是汉字 1em 就是一个汉字的宽度

letter-spacing: 字间距

letter-spacing属性是用来定义字间距（字符与字符之间的空白）其属性值可为不同单位的数值，允许使用负值，默认值为normal

word-spacing: 单词间距

用于定义英文单词之间的距离，对中文字符无效鳍鱼和lettet-spacing一样

word-break :自动换行

normal 受用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或者连字符处换行

颜色半透明(css3）

在css3 我们可以采取如下的语法来使文字半透明

  color:rgba(0,0, 0, 0.3)

文字阴影（css3）

/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色 */
text-shadow: 1px 2px 3px red

引入Css样式表

内部样式表

内嵌式式将css代码集中卸载HTML文档的head头标签中，并用style标签定义，基本语法如下

<head>
    <title>Document</title>
    
    <style type="text/CSS">
    内容
    </style>
</head>

语法里，style标签位于head标签中，title标签后，也可以放在HTML文档的任何地方， type="text/CSS 在HTML5中可以省略。

行内式（内联样式）

内联样式，又称行内样式，行间样式，内嵌样式，是通过标签的style属性来设置元素的样式，基本语法如下

<标签名 style="属性1:属性值1;属性2:属性值2;">   内容          </标签名>

内联样式适用于比较少的情况

外部样式表（外链式）

嵌入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，基本语法如下

   <link rel="stylesheet" href="CSS文件路径" type="text/CSS>

这个link是个单标签，且link必须放到head标签中而且得指定3个属性
href：定义锁连接到外部样式表文件的URL，可以是相对或者绝对路径

type：定义所连接的文档类型，type="text/CSS 表示为连接的外部文件为css样式表

rel：定义当前文档与被链接的文档之间的关系，styleheet表示被连接文档是个样式表文件

三种样式表的总结

在这里插入图片描述

块级元素

每个块级元素通常都会独自占据一整行躲着多整行，可以对其设置宽度，高度，对齐等属性，常用于网页布局和网页结构搭建

常见的块级元素由 h1-h6 ,p ,div,ul,ol,li 其中div是最典型的块级元素

块级元素的特点

1，总是从新行开始
2，高度，行高，内外边距都是可以控制的
3，宽度默认是容器的100%
4，可以容纳内联元素和其他块级元素

行内元素（内联元素）

行类元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度，高度，对齐等属性，常用于控制页面中文本的样式
常见的行内元素有 a，trong ，b ，em ，i ，u， span 等其中以span为典型

行内元素的特点
1，和相邻的行内元素在同一行上
2，高，宽无效，但是水平方向的padding和margin可以设置，垂直方向的无效
3，默认宽度就是它本身内容的宽度
4，行内元素只能容纳文本或者其他行内元素（a特殊）

注意：
1，只有文字才能组成段落，因此P里面不能放块级元素，同理还有标签h1-h6 dt他们都是文字类块级标签，里面能不能放其他块级元素

行内块元素

在行内元素中有几个特殊标签<img />,<input /> <td >可以对他们的设置宽度和对其属性，他们可以成为行内块元素

行内块元素的特点
1，和相邻的行内元素（行内块）在一行上，但是之间会有空白缝隙
2，默认宽度就是它本身的宽度
3，高度，行高，外边距以及内边距都可以控制

标签显示模式转换display

块转行类： display：inline；
行内砖块：display ：block;
块行内元素转为行内快元素：display：inline-block

Css复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成，目的是为了可以选择更准确更精细的目标元素标签

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。如h3.special
在这里插入图片描述
记忆技巧：
交集选择器是并且的意思。即xx又xx的意思
比如p.one 选择的是类名为 .one的段落标签
用的相对比较少

并集选择器

并集选择器是各个选择器通过逗号连接而成，任何形式的选择器（包括标签选择器，class类选择器，id选择器）都可以作为并集选择器的一部分，如果某些选择器定义的样式完全相同或者是部分相同，就可以利用并集选择器为他们定义相同的CSS样式
在这里插入图片描述

记忆技巧：
并集选择器是和的意思，就是说只要是逗号隔开的，所哟胡选择器都会执行后面的样式
比如.one , p , #test{color:red} 表示.one 和 p 和#test这3个选择器都会执行颜色为红色，通常用于集体声明，一般一行写一个，方便阅读

后代选择器

后代选择器又称为包含选择器，用来选择元素或者元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分割，当标签发生嵌套时，内层标签就成为了外层标签的后代。它可以选择任何包含在内的标签
在这里插入图片描述

  <style>
        div p
        {
            color: red
        }
        .demon p
        {
            color: blue
        }
    </style>


<body>
    <div>
        <p>内容</p>
    </div>
    <div class="demon" >
        <p>内容2</p>
    </div>

</body>

子元素选择器

子元素选择器只能选择作为某元素子元素的元素，其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个">" 进行连接，注意符号左右个保留一个空格
在这里插入图片描述
比如。demo > h3 {color : red ;}说明h3一定是demo的亲儿子。

属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    input[type]
     {
         color: blue;
     }
     input[type=text]
     {
         color: red;
     }

     input[type*=set]
     {
         color:pink;
     }
    </style>
</head>
<body>
   <input type="text" value="文本框">
   <input type="text" value="文本框">
   <input type="text" value="文本框">
   <input type="submit" value="文本框">
   <input type="submit" value="文本框">
   <input type="reset" value="文本框">
   <input type="reset" value="文本框">
   <input type="reset" value="文本框">

</body>
</html>

伪元素选择器

1，E::first-letter 文本的第一个单词或字（如中文，日文，韩文等）
2，E::first-line 文本第一行
3，E::selection 可改变选中文本的样式
4，E::before 和E::after 在E元素内部开始的位置和结束位置创建一个元素，
该元素为行内元素，必须要结合conten属性使用

   p::first-letter{
        color: rebeccapurple
    }
    p::first-line
    {
        color: red
    }
    p::selection
    {
        color: azure
    }
    div::before{
        content: "star";
    }
    div::after 
    {
        content: "end";
    }