css基础

菠萝啊菠萝蜜

已于 2023-09-03 11:01:46 修改

阅读量818

点赞数

分类专栏： HTML、CSS 文章标签： css 前端 html

于 2021-04-28 22:17:12 首次发布

梦开始时间2021/03/06

本文链接：https://blog.csdn.net/yuy20151225/article/details/116233261

版权

HTML、CSS 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

CSS语法

样式的创建(内部样式外部样式内联样式)

两种引入外部样式表link和import之间的区别

CSS选择符（选择器）

CSS选择符的权重

CSS(cascading style sheet) ,层叠样式表,是用于控制网页样式。

CSS语法

CSS语法由两部分组成：选择符、声明。
声明包括：属性名和属性值。
选择符 {属性名: 属性值 ;属性名:属性值。

说明：
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2）属性必须放在花括号 {}中，属性与属性值用冒号连接：
3）每条声明用分号；结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。
5）在书写样式过程中，空格、换行等操作不影响属性显示。

样式的创建(内部样式外部样式内联样式)

A、内部样式

语法：
<style type="text/css">
/*css语句*/
</style>

注：使用style标记创建样式时，最好将该标记写在<head></head>;

B、外部样式

*方法一：外部样式表的创建： link
<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
说明：
使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。
rel（relation）：用于关联样式表；
type：定义文档类型；

*方法二：外部样式表的导入
<style type="text/css">
@import url(目标文件的路径及文件名全称) ；
</style>
注：@和import之间没有空格，url和小括号之间也没有空格；必须结尾以分号结束；

两种引入外部样式表link和import之间的区别

C、行内样式（行间样式，内联样式，嵌入式样式）

语法：<标签 style="属性：属性值;属性:属性值;"></标签>

CSS选择符（选择器）

Css选择符分类：

类型选择符（标记选择器/元素选择器）
类选择符（class选择符）
ID选择符（id选择器）
伪类选择器
通配符（*）设置全局属性
群组选择符（集合/并集选择器）
包含选择符（后代选择器）
属性选择符
伪对象选择符(伪元素选择符)
子选择器

1）元素选择符/类型选择符/元素选择器

语法：元素名称{属性：属性值；}

说明：

a)元素选择符,就是使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。

b)所有的页面元素都可以作为选择符;

用法：
1)如果想改变某个元素得默认样式时，可以使用类型选择符；
（如：改变一个div、p、h1样式）

2) 当统一文档某个元素的显示效果时，可以使用类型选择符
（如：改变文档所有p段落样式）

2) id选择器

语法：#id名{属性：属性值;}

标签内 id=自定义名字
说明：

如：css中: #div1{width:300px; height:300px;}

html中: <div id="div1"></div>

起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
一个id名称只能对应文档中一个具体的元素对象，因为id的唯一性

3）class选择器

语法：.class名{属性：属性值;}
说明：
A）当我们使用class选择符时，应先为每个元素定义一个类名称。
B）class选择符的语法格式是："如：css中：.top{属性:属性值;} ,html中:<div class="top"></div>"
用法：class选择符更适合定义一类样式；

4)*通配符

语法：*{属性：属性值；}
说明：通配选择符的写法是“*”，其含义就是所有元素。
用法：常用来重置样式。*{margin:0;padding:0;}

5）群组选择器

语法：选择符1，选择符2，选择符3{属性：属性值;},用于集体声明,选择多组标签,同时为他们定义相同的样式.
说明：当有多个选择符应用相同的样式时，可以将选择符用 (英文逗号)“，”分隔的方式，合并为一组。如: h1,p,#div1,.box1{属性:属性值;}

6）包含选择器(后代选择器)

语法：选择符1 选择符2{属性：属性值;}
说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有的选择符2;
选择的最终是后代的所有标签。如： .top p {属性名:属性值}

7）伪类选择器(伪类选择符)

语法：
a:link{属性：属性值;}超链接的未访问是的状态;
a:visited{属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
LVHA
说明：
当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：L V H A

8）子选择器(亲儿子选择器)

语法：选择符1>选择符2{属性：属性值;}
说明：选择符1和选择符2用 >隔开，含义就是选择符1中包含的所有的选择符2;
选择的是某元素最近一级子元素.
 <div>
        <p></p>
        <p></p>
        <span>
            <p></p>
        </span>
    </div>
div>p{属性:属性值;}

最终选择的是前两个p标签,最近一级的元素

10.伪对象选择符(伪元素选择器)

利用css创建一个新的元素，给这个元素添加样式; 不需要html结构，在结构中找不到所以叫伪元素；

伪元素属于行内元素;

利用伪元素清除浮动

1）::after : 必须和content属性一起使用，可以在当前元素内最后的位置添加内容（文本、图片、元素）。

content：“” 可为空，但必须有

语法：选择符:：after{content:”文字”;}
   选择符:：after{content:url(图片路径)；}

如：div::after{content:url(logo.jpg);}
   div::after{content:"文本内容";}

2）::before: 必须与content属性一起使用,可以在当前元素内最前的位置添加内容(文本、元素、图片)。

content：“” 可为空，但必须有

div::before{content:"在其前放内容";}

3）、::first-letter 定义对象内第一个文本的样式。
*(该伪元素选择器只能用于块级元素和行内块元素)。

4）、::first-line:定义对象内第一行文本的样式。
*(该伪元素选择器只能用于块级元素和行内块元素。)

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .h1 {
      margin: 0 auto;
      width: 50%;
      height: 300px;
      line-height: 300px;
      background-color: green;
      text-align: center;
    }

    /* 创造伪元素并添加样式 */
    .h1::after {
      content: "伪元素";
      color: pink;
      margin-left: 50px;
    }
  </style>
</head>

<body>
  <h1 class="h1">你好</h1>
</body

CSS选择符的权重

css中用四位数字表示权重，权重的表达方式如：0，0，0，0

继承样式或通配符选择器的权重为0000
元素选择符的权重为0001
class选择符的权重为0010
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素选择符的权重为0010
id选择符的权重为0100
内联样式(行内样式)的权重为1000
!important的权重无穷大
包含选择符(后代选择器)的权重：为包含选择符的权中之和
复合选择器的权重，各算各的

菠萝啊菠萝蜜

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css基础

如：css中: #div1{width:300px;如：div::after{content:url(logo.jpg);选择符:：after{content:url(图片路径)；}鼠标悬停，即鼠标划过超链接时的状态;div::after{content:"文本内容";div::before{content:"在其前放内容";css中用四位数字表示权重，权重的表达方式如：0，0，0，0。语法：选择符:：after{content:”文字”;h1,p,#div1,.box1{属性:属性值;
复制链接

扫一扫