css笔记 | 易学教程

1.在HTML中引入CSS共有3种方式：
（1）外部样式表：把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表
外部样式表在单独文件中定义，并且在标签对中使用link标签来引用。

<head> 
 <title></title>
    <!--在HTML页面中引用文件名为index的css文件-->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

（2）内部样式表：指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在标签对是放在标签对内的。

<head>  
  <title></title>    
  <!--这是内部样式表，CSS样式在style标签中定义-->    
  <style type="text/css">
          p{color:Red;}      
   </style>
 </head>

CSS样式在

（3）内联样式表：把CSS代码和HTML代码放在同一个文件中，但是跟内部样式表不同，CSS样式不是在标签对中定义，而是在标签的style属性中定义。


<body>
    <p style="color:Red; ">绿叶学习网</p>
    <p style="color:Red; ">绿叶学习网</p>
    <p style="color:Red; ">绿叶学习网</p>
</body>

2.id、class
(1)id
同一个HTML页面中，不允许出现两个相同的id
(2)class
①为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class具有相同的CSS样式；
②一个标签可以同时定义多个class；
③id也可以写成name，区别在于name是HTML中的标准，而id是XHTML中的标准，现在网页的标准都是使用id，所以大家尽量不要用name属性；

3.css选择器
（1）元素选择器
元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。
在这里插入图片描述
（2）id选择器
为元素设置一个id，然后针对这个id的元素进行CSS样式操作

id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表明这是一个id选择器

（3）class选择器
类选择器”，对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行CSS样式操作
在这里插入图片描述
（4）子元素选择器
选中某个元素下的子元素，然后对该子元素设置CSS样式。

父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        #father1 div{color:blue;}

        #father2 #p1{color:red;}

    </style>

</head>

<body>

    <div id="father1">

        <div>绿叶学习网</div>

        <div>绿叶学习网</div>

    </div>

    <div id="father2">

        <p id="p1">绿叶学习网</p>

        <p id="p2">绿叶学习网</p>

        <span>绿叶学习网</span>

    </div>

</body>

</html>

（5）相邻选择器
相邻选择器，就是选中该元素的下一个兄弟元素，在这里注意一点，相邻选择器的操作对象是该元素的同级元素。
在这里插入图片描述

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #lv+div{color:red;}
    </style>
</head>
<body>
    <div>绿叶学习网</div>
    <div id="lv">
        <p>绿叶学习网</p>
    </div>
</body>

</html>

（6）群组选择器

同时对几个选择器进行相同的操作

（1）font-family 字体类型
例：font-family:微软雅黑;
（2）font-size 字体大小
例：font-size:像素值;
（3）font-weight 字体粗细
font-weight属性一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数值（100~900）。
（4）font-style 字体斜体
font-style:取值;
取值情况：
normal 默认值，正常体
italic 斜体，这是一个属性
oblique 将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique
（5）color 颜色

5.文本样式总结
（1)text-decoration
定义字体下划线、删除线和顶划线。
text-decoration:属性值;
属性值：
none 默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
underline 下划线
line-through 删除线
overline 顶划线

（2）text-transform
转换文本的大小写，这个是针对英文而言，因为中文不存在大小写之分。
text-transform:属性值;
属性值
none 默认值，无转换发生
uppercase 转换成大写
lowercase 转换成小写
capitalize 将每个英文单词的首字母转换成大写，其余无转换发生

（3）font-variant
把文本设置成小型大写字母，这也是针对英文而言，因为中文不存在大小写之分。
属性
normal 默认值，正常效果
small-caps 小型大写字母的字体

（4）text-indent
控制文本首行的缩进。
text-indent:像素值;

（5）text-align
使用text-align属性控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐。
text-align:属性值;
属性
left 默认值，左对齐
center 居中对齐
right 右对齐
只能针对文本文字和标签，对其他标签无效

（6）line-height
line-height属性指的是行高，而不是行间距。
line-height:像素值;

（7）letter-spacing
letter-spacing:像素值;1
letter-spacing控制的是字间距，每一个中文文字作为一个“字”，而每一个英文字母也作为一个“字”

（8）word-spacing
word-spacing:像素值;
定义词间距，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。

6.边框样式
（1）
border-width:像素值; 边框的宽度
border-style:属性值; 边框的外观，用于设置边框的外观，例如实线边框和虚线边框。
border-color 边框的颜色
（2）
上边框 border-top
下边框border-bottom
左边框-left
右边框border-right

border-right-width:1px;
border-right-style:solid;        =           border-right:1px solid red;
border-right-color:red;

7.背景样式
（1）background-color属性来控制元素的背景颜色
color和background-color区别：color是文本颜色，background-color是背景颜色
（2）
background-image:url(“图像地址”); 定义背景图像的路径，这样图片才能显示嘛；图像地址可以是相对地址，也可以是绝对地址。
background-repeat 定义背景图像显示方式，例如纵向平铺、横向平铺
属性：
no-repeat 表示不平铺
repeat 默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺
repeat-x 表示在水平方向（x轴）平铺
repeat-y 表示在垂直方向（y轴）平铺
background-position 定义背景图像在元素哪个位置，需要定义横向纵向的位置，单位px
background-attachment 定义背景图像是否随内容而滚动

来源：CSDN

作者：田地里的大麦子

链接：https://blog.csdn.net/TDLDDMZ/article/details/104181055

标签

css

css选择器

html代码

css样式