随笔 - 77  文章 - 0  评论 - 0  阅读 - 21363 

CSS基本语法和选择器

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

 

1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。

 

web项目开发中css的位置

css主要一般都是由前端开发工程师,或者UI设计师完成的.

 

w3c标准-----万维网联盟,

结构标准: html

外观标准: css

动作标准: javascript

 

css的基本使用

css在使用过程中,主要就是嵌套进网页中进行使用的.使用过程中,一般有三种引入方式:

行内样式

主要在开始标签中, 通过style属性来编写样式.在工作中,行内样式是使用频率最少的.

一般都是将来通过来javascript来控制的样式才会使用行内样式.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="color: red;">
    <h1 style="border: 1px solid #ccc;">网页的内容</h1>
</body>
</html>

 

内部样式

主要通过在head的内部子标签style标签中编写css样式.

在开发中,内样样式主要都是编写在html网页内部,但是开发中一个web项目往往由多个html网页组成.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body {
        background-color: orange;
    }
    h1 {
        background-color: blue;
        color: white;
    }
    </style>
</head>
<body>
    <h1>网页的内容</h1>
</body>
</html>

 

 

外部样式

主要是在css文件中编写css样式, 然后在head的子标签link标签的href属性中指定css路径引入到网页中进行“导包”使用.

创建html网页,编写代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <h1>网页的内容</h1>
</body>
</html>

 

创建css文件,例如,上面所说的,index.css,保存当前网页的同级目录css目录下, 然后编写代码

body{
    background-color: orange;
}
h1{
    color: red;
}

 

css的语法

基本语法

格式: 
选择符{
  样式属性: 属性值;
  样式属性: 属性值 属性值 ...;
}
​
选择符{样式属性: 属性值;样式属性: 属性值 属性值 ...;}
​
# 注意:
1. 选择符主要是告诉浏览器,接下来花括号里面样式给哪一个标签或者那一批标签添加外观的,在行内样式中,不需要加选择符
2. 样式属性主要是告诉浏览器,给指定的标签添加什么样的外观,样式属性在同一个花括号里面或者同一个标签中,是唯一的.如果出现重复的话,在浏览器产生覆盖效果.
3. 属性值主要是告诉浏览器,给指定标签添加的指定外观是什么效果,一般如果没有指定样式,浏览器内部都会有对应的默认值,写上属性和属性值以后就会覆盖默认值.属性值也是唯一的.多个属性值的情况下,必须使用英文的空格隔开.
4. css中所有的代码,都不需要缩进或者换行.

 

注释

在css中也有注释,注释的目的是为了解释代码的用途或者作用.方便其他开发者更好的了解当前的代码.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*
       多行注释, 这里的内容就不会被显示或者不会被浏览器执行.
     */
    body{
        background-color: blue; /* 背景-颜色: 蓝色; */
        color: white;  /* 字体颜色: 白色; */
    }
    </style>
</head>
<body>
    <h1>网页的内容</h1>
</body>
</html>

 

 

学习工具

学习css一般有三种工具提供给我们开发:
1. 代码编辑器本身一般自带提示或者语法提示.
​
2. css手册,内部提供提供了所有的样式属性和样式值的使用参考,甚至包括一些演示代码.
   http://css.doyoe.com
   
3. 浏览器也内置了一些css辅助工具给我们学习和开发.
   F12,或者Ctrl+shift+i,或者鼠标右键,检查代码

 

css的选择符

元素选择符

万能选择符*

在工作中, 星号基本不用, 如果有使用的话,基本就是用在页面的外观初始化时.

* { /* 代表网页中的所有元素 */
    color: blue;
}

 

标签选择符

也叫元素选择符,可以指定同一种名称的标签的外观效果,例如,p,h1,a,li在css中都是标签选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        background-color: #cccccc;
    }
    p { /* 通过标签名来控制指定哪些标签的外观效果,这就是标签选择符 */
        font-size: 26px;
    }
    </style>
</head>
<body>
<h1>静夜诗</h1>
<p>
    床前明月光,<br>
    疑是地上霜.<br>
    ....
</p>
<p>
    另一个段落
</p>
</body>
</html>

 

ID选择符

给指定的标签指定id值,把这个id值作为选择符,左边加上#,就可以在css中给这个标签[html元素]加上样式了.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #p1{ /* 告诉浏览器找到id值为p1的标签,给它加上外观样式 */
        color: orange; /* 颜色: 橙色 */
        font-size: 32px; /* 字体-大小: 32像素; */
    }
    #h2{
        color: blue;
    }
    </style>
</head>
<body>
<h1>静夜诗</h1>
<p>
    床前明月光,<br>
    疑是地上霜.<br>
    ....
</p>
<p id="p1">
    另一个段落
</p>
​
<h2 id="h2">h2标题</h2>
</body>
</html>

 

class类选择符

通过标签的class属性值可以对页面中的标签进行分类, 然后在css样式中,使用.分类名作为选择符,可以给指定分类的所有标签增加样式外观

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .c1{ /* 指定具有class属性值为c1的所有的标签的样式 */
        color: blue;
    }
    .p1{
        font-size: 32px;
    }
    .p2{
        background-color: orange;
    }
    </style>
</head>
<body>
<h1>静夜诗</h1>
<p class="p2">
    床前明月光,<br>
    疑是地上霜.<br>
    ....
</p>
​
<p class="c1 p1 p2" id="c1">另一个段落</p>
<h2 class="c1">h2标题</h2>
<p class="c1 p1">还有一个段落</p>
</body>
</html>

 

关系选择符

包含选择符

可以控制到内部所有的标签,不管是子级或者隔代[爷爷.祖先…控制后代]的.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box p{ /* div元素包含的所有的p元素 */
        background-color: blue;
        color: #fff;
    }
    </style>
</head>
<body>
    <p>这是一个网页</p>
    <div class="box">
        <p>这里也有一个段落</p>
        <p>详情请点击<a href="">了解更多</a></p>
    </div>
</body>
</html>

 

父子选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .header p{ /* class="headers"的元素里面所有的子标签p或者孙子标签p... */
        background-color: #ccc;
        color: blue;
    }
    .header>p{ /* class="header"的元素的子标签p */
        color: red;
    }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-left">
            <p>页面的左边</p>
        </div>
        <p>中间的一段文本</p>
        <div class="header-right">
            <p>页面的右边</p>
        </div>
    </div>
</body>
</html>

 

兄弟选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #three+li{ /* id=three的下一个标签叫li的,如果下一个标签不叫li或者不是指定的选择符,则样式的修改无效 */
        color: red;
    }
    #three~.a1{/* id=three的后面所有class=a1的兄弟元素 */
        background-color: orange;
    }
    </style>
</head>
<body>
    <ul>
        <li>第1个li元素</li>
        <li>第2个li元素</li>
        <li id="three">第3个li元素</li>
        <li>第4个li元素</li>
        <li class="a1">第5个li元素</li>
        <li>第6个li元素</li>
        <li class="a1">第7个li元素</li>
    </ul>
</body>
</html>

 

属性选择符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    input[type]{ /* 控制所有具有type属性的input元素 */
        outline: none;/* 去除外边线 */
    }
    input[type=text]{ /* 控制所有type="text"的input元素 */
        color: red;
    }
    </style>
</head>
<body>
    用户名: <input type="text" name="" /><br>
    昵称: <input type="text" /><br>
    密码: <input type="password" /><br>
    性别: <input type="radio" name="">男
</body>
</html>

 

伪类选择符

用于控制标签在某一个特殊环境或者处于某种状态下的时候,控制它们的外观.

E:hover 当元素处于被鼠标悬浮的时候,指定样式
E:nth-child()  当元素处于父元素的指定某一个位置时
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a{
        color: blue;
    }
    a:hover{ /* 当标签处于被鼠标悬浮的时候 */
        color: #7cffa7;
    }
    a:nth-child(1){/* 处于第一个位置的子元素 */
        color: red;
    }
    a:last-child{
        color: red;
    }
    .list1 li:nth-child(odd){ /* odd排名在奇数位置的li标签 */
        background-color: red;
    }
    .list1 li:nth-child(even){
        background-color: blue;
    }
    .last2 li:nth-child(3n-2){
        background-color: red;
    }
    .last2 li:nth-child(3n-1){
        background-color: green;
    }
    .last2 li:nth-child(3n){
        background-color: blue;
    }
    </style>
</head>
<body>
    <a href="http://www.baidu.com/">老男孩</a><br>
    <a href="http://www.baidu.com/">老男孩</a><br>
    <a href="http://www.baidu.com/">老男孩</a><br>
    <a href="http://www.baidu.cn/">老男孩</a>
    <ul class="list1">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <ul class="last2">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</body>
</html>

 

伪对象选择符

E:before / E::before 在元素之前
E:after / E::after   在元素之后
E::selection         在元素鼠标划选文本时
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .price{
        color: red;
    }
    .price::before{
        content: "<<";
        color: blue;
    }
    .price::after{
        content: ">>";
        color: blue;
    }
    .price::selection{
        background-color: red;
        color: orange;
    }
    </style>
</head>
<body>
    <span class="price">价格</span>
</body>
</html>

 

css的属性

文本属性
    text-align       文本水平对齐方式
    text-indent      文本的首行缩进
    letter-spacing   字符间距
    vertical-align   文本垂直对齐方式[一般都是在图片排版的时候使用]
    line-height      文本行高
    text-decoration  文本的装饰线
字体属性    
    font-size        字体大小
    font-family      字体族
    font-weight      字体粗细
    font-style       字体正斜
    font             字体属性的缩写[包括上面接]
    color            字体颜色
​
元素外观
    width               元素的宽度
    height              元素的高度
    min-width           元素的最小宽度
    max-width           元素的最大宽度
​
    border-width       边框的宽度
    border-style       边框的样式
    border-color       边框的颜色
    border             上面三个边框属性的缩写
​
    border-radius      元素的圆角
    background-color   背景颜色
    background-image   背景图片
    background-repeat  背景平铺方式
    background-position 背景定位位置
    background-size     背景尺寸大小
    background          上面几个背景属性的缩写
​
    margin              元素与其他元素的外边距
                      元素上下的外边距如果重合取最大值,元素左右的边距进行相加
    padding             元素与子元素或内容之间的内边距
​
    position            元素的定位
    top                 定位元素离顶部的距离
    bottom              定位元素离底部的距离
    right               定位元素离右边的距离
    left                定位元素离左边的距离
    z-index             元素在z轴上的高度[高的元素被覆盖低的元素]
​
    opacity            不透明度
    box-shadow         元素的阴影
\
布局属性
    display             元素的显示模式
    float               元素的浮动效果
    clear               清除浮动效果
    overflow            处理元素的溢出内容效果
    flex                设置元素的弹性方式
​
动画相关
    transition          元素切换样式值时的过渡效果
    animation           元素的动画效果
​
列表属性
    list-style          列表的项目符号效果
​
表格属性
    border-collapse     表格的边框合并
​
光标属性
    cursor              光标属性

 

 

 

posted on   rider_yang  阅读(293)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae