前端基础02 CSS

CSS的几种引入方式

行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

内部样式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部样式

外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS选择器

基本选择器

  1. 元素选择器

    p {color: "red";}
  2. ID选择器
    #i1 {
    background-color: red;
    }
  3. 类选择器
    .c1 {
    font-size: 14px;
    }
    p.c1 {
    color: red;
    }

    标签中的class属性如果有多个,要用空格分隔

  4. 通用选择器
    * {
    color: white;
    }

组合选择器

  1. 后代选择器

    /*li内部的a标签设置字体颜色*/
    li a {
    color: green;
    }
  2. 儿子选择器
    /*选择所有父级是 <div> 元素的 <p> 元素*/
    div>p {
    font-family: "Arial Black", arial-black, cursive;
    }
  3. 毗邻选择器
    /*选择所有紧接着<div>元素之后的<p>元素*/
    div+p {
    margin: 5px;
    }
  4. 弟弟选择器
    /*i1后面所有的兄弟p标签*/
    #i1~p {
    border: 2px solid royalblue;
    }

属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

分组和嵌套

  1. 分组
    当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
    例如:

    div, p {
    color: red;
    }
  2. 嵌套
    多种选择器可以混合起来使用,比如:.c1类内部所有p标签设置字体颜色为红色。
    .c1 p {
    color: red;
    }

原文地址:http://blog.51cto.com/dzm911/2348557

时间: 2024-11-06 07:33:48

前端基础02 CSS的相关文章

前端基础之css复习

!/usr/bin/env python# -*- coding: utf-8 -*-#前端基础之CSS#CSS 语法#CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.''' selector { #选择器 property: value; #属性:值 property: value; ... property: value } '''#例如:#h1 {color:red; font-size:14px;}# css的四种引入方式#1.行内式# 行内式是在标记的style属性中设定

前端基础之CSS补充

目录 选择器优先级 CSS属性相关 宽和高 字体属性 背景属性 字重(粗细) 文本颜色 文字属性 文字对齐 文字装饰 背景属性 支持简写 边框 border-radius 圆形 display属性 display:"none"与visibility:hidden的区别:** CSS盒子模型 margin (行距)*** padding (内容填充) *** Border(边框) Content**(内容) float 浮动 三种取值 浮动的简单引用 clear 浮动带的影响 清除浮动

前端基础学习-css文字颜色渐变的3种实现

在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } 第一种方法,使用 background-cli. tex

前端基础02

复习新增 1.1  开发前的准备工作 1.配置开发环境   sublime  webstorm  vscode  Hbuilder  atom 2.建立项目文件夹   为了将与项目相关的文件放在一块,便于管理和以后的维护 包括与项目相关的一些文件 主页或是首页    index.html   default.html Css文件夹    css文件的 base.css     global.css Images文件夹  用来放置网站中的所有的图片 Js文件 音频或是视频文件 3. 样式初始化 我

前端基础之CSS - day13

写在前面 上课第13天,打卡: 出去浪,终有一日要还的: 参考:http://www.cnblogs.com/yuanchenqi/articles/6856399.html 一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. h1 {color:red; font-size:14px;} 二.CSS三种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式,即直接写在HTML标签里的css样式: <p style="color: red"

前端基础之CSS

一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ... property: value } ''' 例如: h1 {color:red; font-size:14px;} 二.CSS的四种引入方式 1.行内式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: &

前端基础之css一

学了几天的web了今天才来整理,这个相比较前面的python来说就比较好理解了, 那接下来我就以代码的方式呈现出来以便我们以后的查阅和理解,我就编辑到代 码框里了昂 1.列表标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>

前端基础学习css

一.伪类 anchor用于控制链接效果 a:link (没有访问过的链接),定义链接的常规状态 a:hover(鼠标放在链接上的状态),用于控制显示效果 (常用) a:visited(访问过的链接) ,能清楚判断访问过的链接 a:active(在鼠标按下时的状态) 例子: Title.{             : : : }         .{             : : : }         .:.{             : }         :{             ::

Web前端基础(CSS position的正确用法)

position属性的relative以及absolute的区别是什么? 任何元素的默认position的属性值都为static(静态),但我们在布局的时候也会经常用到relative(相对)以及absolute(绝对)这两种属性. 再分别介绍两种属性之前,我们一定要记住一个重要结论:如果用position来进行布局,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素padding的属性影响,当然也可以用relativ