CSS

CSS 简介

## CSS介绍

    CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

    当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

## CSS语法

	CSS实例：每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

    例如：

    	h1       {color:    red; font-size:   14px}

      选择器       属性 声明   值     属性   声明  值

## CSS注释

	/*这是注释*/

    快捷键是 ctrl + /

CSS的几种引入方式

## 行内样式

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

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

## 内部样式

	嵌入式是将CSS样式集中写在网页<head></head>标签对中，格式如下：

    <head>

    	<meta charset="UTF-8">

        <title>Title</title>

        <style>

        	p{

                background-color: #2b99ff;

            }

        </style>

	</head>

<p>Hello world</p>

## 外部样式

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

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

CSS选择器

## 基本选择器

<!DOCTYPE html>

<html lang="en">

    <head>

    	<meta charset="UTF-8">

        <title>Title</title>

        <style>

            #a1{

                color: red;

            }

            /*id选择器*/

            .a2{

                color: yellow;

            }

            /*类选择器*/

            #a1 #a11{color: greenyellow}

            /*后代选择器*/

            #a1>#a11{color: hotpink}

            /*儿子选择器*/

            #a1+p{margin: 10px}

            /*选择所有紧接着 #a1 元素之后的<p>元素*/

            #a1~div{border: 2px solid royalblue}

            /*a1后面所有的兄弟div标签*/

            div[title="hello"]{color: bisque}

            /*用于选定带有指定属性和值的元素（选择属性title值为hello）*/

            #a1, #a21 {color: blueviolet}

            /*同时给id为a1和a21的字体颜色设置为蓝色，用到了分组，

            标签之间用逗号隔开*/

            body { font-family: "宋体", "Arial", sans-serif }

            /*字体属性*/

            div {

                width: 20%;

                height:200px;

                background:yellowgreen;

            }

            /*宽、高和背景颜色*/

            /* 未访问的链接 */

            a:link {

              color: #FF0000

            }

            /* 鼠标移动到链接上 */

            a:hover {

              color: #FF00FF

            }

            /* 选定的链接 */

            a:active {

              color: #0000FF

            }

            /* 已访问的链接 */

            a:visited {

              color: #00FF00

            }

            /*input输入框获取焦点时样式*/

            input:focus {

              outline: none;

              background-color: #eee;

            }

            p:first-letter{font-size: 49px; color: red}

            /*伪元素选择器，给首字母设置特殊格式*/

        </style>

	</head>

<body>

<div id="a1"  style="font-size: 40px">

    hello

    <div id="a11">

        hello world

    </div>

    <div id="a12">

        hello china

    </div>

</div>

<p>哈哈哈</p>

<div class="a2" style="font-size: 40px" title="hello">

    welcome

    <div id="a21">

        welcome china

    </div>

    <div id="a22">

        welcome British

    </div>

</div>

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

<a href="属性的引入方式.html">属性的引入方式</a>

<p>hello<span>world</span>nice to meet you</p>

</body>

</html>

补充点

## 不怎么常用的属性选择器

/*找到所有title属性以hello开头的元素*/

[title^="hello"] {

  color: red;

}

/*找到所有title属性以hello结尾的元素*/

[title$="hello"] {

  color: yellow;

}

/*找到所有title属性中包含（字符串包含）hello的元素*/

[title*="hello"] {

  color: red;

}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/

[title~="hello"] {

  color: green;

}

## 伪元素选择器

before: 

    /*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; }

after:

    /*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; }

####    before和after多用于清除浮动

'''

选择器的优先级

	内联样式的权重为1000，id选择器的权重为100，类选择器的权重为10，元素选择器的权重为1，权重计算永不进位

'''

## CSS属性相关

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

## 字体属性

# 字重（粗细）

normal:标准粗细

bold:粗体

bolder:更粗

lighter:更细

100~900：设置具体粗细，400等同于normal,而700等同于bold

inherit:继承父元素字体的粗细值，默认值

# 文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000

一个RGB值 - 如: RGB(255,0,0)

颜色的名称 - 如:  red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

前端之CSS(上)的更多相关文章

  1. 前端开发 - CSS - 上

    CSS: 1.css的引入方式 2.基础选择器 3.高级选择器 4.选择器的优先级 5.伪类选择器 6.字体样式 7.文本样式 8.背景 9.盒模型border 10.margin 11.paddin ...

  2. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  3. 前端之css

    前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...

  4. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  5. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  6. 第二篇：web之前端之css

    前端之css   前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...

  7. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  8. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  9. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

随机推荐

  1. Salesforce 开发整理（七）配置审批流

    salesforce提供了比较强大的可配置审批流功能,在系统中翻译为“批准过程”.所以需要配置审批时,选择创建 ——>  工作流和批准 ——> 批准过程,然后选择管理批准过程,选择需要配置 ...

  2. Linux系统运维笔记,CentOS 7.4防火墙配置

    1.查看firewall服务状态 systemctl status firewalld 2.查看firewall的状态 firewall-cmd --state 3.开启.重启.关闭.firewall ...

  3. 使用 Java 执行 groovy 脚本或方法

    1. 引入依赖 <dependency> <groupId>org.codehaus.groovy</groupId> <artifactId>groo ...

  4. 【对不同形式矩阵的总结】WC 2009 最短路径问题（线段树+矩阵乘法）

    题意 ​ 题目链接:https://www.luogu.org/problem/P4150 ​ 一个 \(6\times n\) 的网格图,每个格点有一个初始权值.有两种操作: 修改一个格子的权值 求 ...

  5. 第三次实验报告：使用Packet Tracer分析TCP连接建立过程

    目录 1 实验目的 2 实验内容 3. 实验报告 3.1 建立网络拓扑结构 3.2 配置参数 3.3 抓包,分析TCP连接建立过程 4. 拓展 (不作要求,但属于加分项) 1 实验目的 使用路由器连接 ...

  6. 多年老项目添加cocoapod管理之后的各种问题解决方案

    整个组件化过程中遇到的问题及解决方案原文出处 hehuoya.com pod install 报警告(debug.release..) 解决方案:other link flags : $(inheri ...

  7. 四种软件开发模式：tdd、bdd、atdd和ddd的概念

    看一些文章会看到TDD开发模式,搜索后发现有主流四种软件开发模式,这里对它们的概念做下笔记. TDD:测试驱动开发(Test-Driven Development) 测试驱动开发是敏捷开发中的一项核心 ...

  8. window下使用curl操作elasticsearch

    1.下载curlzip,https://curl.haxx.se/download.html; 2.解压,在bin文件夹中找到curl.exe,右键“以管理员身份运行”,cmd e: 换盘符:出现E: ...

  9. IdentityService4学习笔记之Client Credentials

    IdentityService4简介 一套为应用程序构建身份认证和访问控制解决方案/框架,包括单点登录,身份认证,授权和API访问控制. 前文 今天介绍ClientCredentials认证类型,适用 ...

  10. 万张PubFig人脸数据实现基于python+OpenCV的人脸特征定位程序(1)

    在最近刷今日头条以及其他媒体软件时,经常会发现一些AI换脸的视频,于是我想,可不可以自己实现一个可以进行人脸识别的软件程序.我的具体流程是先配合python网络爬虫先进行万张PubFig人脸公共图片的 ...