Oshi Hướng dẫn Phong cách

Giới thiệu

hướng dẫn phong cách này được dựa trên hướng dẫn bootstrap Twitter. Nó có nghĩa là một phác thảo chung về cách Oshi nên được trình bày.

tác phẩm nghệ thuật thương hiệu

Oshi Logos

Oshi-header-logo-lớn-tối-nền Oshi-logo-lớn-đen-bạch-nền

Hình thu nhỏ, liên kết với các tập tin media đầy đủ kích cỡ

Ước sử dụng trong logo

Logo chữ: Ubuntu. font này có thể được tải về từ: google.com/fonts/specimen/Ubuntu

Các dấu chấm màu đỏ trên 'i' là #FF0C00

góc chữ: độ 97

góc biểu tượng Oshi
góc type logo Oshi

'Oshi Guy' Mascot

Những hình ảnh dưới đây liên kết đến hình ảnh kích thước đầy đủ của anh chàng Oshi.

characterposes_vector 1.0
Oshi chàng, nền sáng
characterposes_vector 1-0 tối
Oshi chàng, nền tối

 

Hình thu nhỏ, liên kết với các tập tin media đầy đủ kích cỡ

 

Nhãn hiệu Màu sắc & Cách sử dụng

Bối cảnh ánh sáng

Màu nền: #FFFFFF

Màu chữ: #000000

nền tối

Màu nền: #13181C

Màu chữ: #FFFFFF

Phép in bản thạch

Liên kết

Liên kết ngoài

Tất cả các liên kết đến các trang trong tên miền, sẽ

văn bản liên kết

Nếu một liên kết đi đến một trang web bên ngoài, nó sẽ mở trong một tab mới và sẽ có một biểu tượng tương tự như sau:

văn bản liên kết

Css cho các liên kết:

nền trắng (#fff)
a {color: #1A0DAB; text-decoration: none;} a: hover {text-decoration: underline;} a: visited {color: #609;} liên kết bên ngoài sẽ có 'liên kết ra "biểu tượng.

Nền tối (#13181C)

Oshi Màu nền
Bối cảnh Oshi Màu #13181C

a: {color: #FF9800; text-decoration: underline;} a: hover {text-decoration: none;} a: visited {color: #FFC107; text-decoration: underline; } liên kết bên ngoài sẽ có 'liên kết ra "biểu tượng.

2016-05-20_133310

Tiêu đề

Tất cả các đề HTML, <h1> thông qua <h6>, có sẵn. .h1 thông qua .h6 lớp học cũng có sẵn, để khi bạn muốn để phù hợp với phong cách font chữ của một nhóm nhưng vẫn muốn văn bản của bạn sẽ được hiển thị nội tuyến.

h1. đề Oshi

nửa đậm 36px

h2. đề Oshi

nửa đậm 30px

h3. đề Oshi

nửa đậm 24px

h4. đề Oshi

nửa đậm 18px
h5. đề Oshi
nửa đậm 14px
h6. đề Oshi
nửa đậm 12px
Sao chép
<h1> h1. Oshi hướng </ h1> <h2> h2. Oshi hướng </ h2> <h3> h3. Oshi hướng </ h3> <h4> h4. Oshi hướng </ h4> <h5> h5. Oshi hướng </ h5> <h6> h6. Đề Oshi </ h6>

Tạo nhẹ hơn, văn bản thứ trong nhóm bất kỳ với một chung <Nhỏ> thẻ hoặc .nhỏ lớp.

h1. đề Oshi văn bản thứ cấp

h2. đề Oshi văn bản thứ cấp

h3. đề Oshi văn bản thứ cấp

h4. đề Oshi văn bản thứ cấp

h5. đề Oshi văn bản thứ cấp
h6. đề Oshi văn bản thứ cấp

CSS cho văn học.

.h1 .small, .h1 nhỏ, .h2 .small, .h2 nhỏ, .h3 .small, .h3 nhỏ, h1 .small, h1 nhỏ, h2 .small, h2 nhỏ, h3 .small, h3 nhỏ { font-size: 65%; } .h1 .small, .h1 nhỏ, .h2 .small, .h2 nhỏ, .h3 .small, .h3 nhỏ, .h4 .small, .h4 nhỏ, .h5 .small, .h5 nhỏ, .h6 .small, .h6 nhỏ, h1 .small, h1 nhỏ, h2 .small, h2 nhỏ, h3 .small, h3 nhỏ, h4 .small, h4 nhỏ, h5 .small, h5 nhỏ, h6 .small, h6 nhỏ { font-weight: 400; line-height: 1; }

 

Sao chép
<h1> h1. Oshi hướng <small> văn bản thứ </ small> </ h1> <h2> h2. Oshi hướng <small> văn bản thứ </ small> </ h2> <h3> h3. Oshi hướng <small> văn bản thứ </ small> </ h3> <h4> h4. Oshi hướng <small> văn bản thứ </ small> </ h4> <h5> h5. Oshi hướng <small> văn bản thứ </ small> </ h5> <h6> h6. Oshi hướng <small> văn bản thứ </ small> </ h6>

Bản sao cơ thể

mặc định toàn cầu Oshi của cỡ chữ is 14px, Với một chiều cao giữa các dòng of 1.62. Điều này được áp dụng cho các <body> và tất cả các đoạn văn. Trong Ngoài ra, <P> (Đoạn) nhận được một lề dưới của nửa line-height tính toán của họ (10px theo mặc định).

Nullam mollis risus quis eget ornare urn eu leo ​​vel. Cum sociis natoque penatibus et Magnis dis vừa nghĩ tới núi nascetur ridiculus mus. Nullam id ultricies id nibh chuyển tải nỗi đau.

Cum sociis natoque penatibus et Magnis dis vừa nghĩ tới núi nascetur ridiculus mus. Donec metus ullamcorper nulla không Fringilla auctor. Mollis Duis, là không luctus COMMODO, nisi erat porttitor ligula, Lacinia nec elit eget sem hận thù. Donec metus ullamcorper nulla không Fringilla auctor.

Mạnh thường quân risus eget varius sed blandit diam không ngồi Amet magna. Donec id elit non mi porta gravida tại eget metus. Mollis Duis, là không luctus COMMODO, nisi erat porttitor ligula, Lacinia nec elit eget sem hận thù.

Sao chép
<p> ... </ p>

Bản sao cơ thể Chì

Thực hiện một đứng ra bằng cách thêm đoạn .Lead.

Vivamus sagittis Lacus augue vel laoreet rutrum faucibus auctor đau. Mollis Duis, không est COMMODO luctus.

Sao chép
<p class = "dẫn dắt"> ... </ p>

Được xây dựng với Less

Các tỷ lệ đánh máy được dựa trên hai biến Ít trong variables.less: @ Font-size-base toàn @ Line-height-base. Việc đầu tiên là cơ sở font-size sử dụng trong suốt và thứ hai là cơ sở line-height. Chúng tôi sử dụng các biến và một số toán học đơn giản để tạo ra lợi nhuận, miếng đệm, và dòng đỉnh cao của tất cả các loại của chúng tôi và nhiều hơn nữa. Tùy chỉnh họ và thích nghi Oshi.

yếu tố văn bản Inline

văn bản đánh dấu

Để làm nổi bật một hoạt động của văn bản do liên quan của nó trong bối cảnh khác, sử dụng các <Mark> tag.

Bạn có thể sử dụng các thẻ đánh dấu để làm nổi bật văn bản.

Sao chép
Bạn có thể sử dụng các thẻ đánh dấu để <mark> nhấn </ mark> văn bản.

văn bản đã xóa

Để cho biết khối văn bản đã bị xóa sử dụng các <Del> tag.

Dòng này của văn bản là có nghĩa là để được điều trị như văn bản bị xóa.

Sao chép
<del> Dòng này của văn bản là có nghĩa là để được điều trị như văn bản bị xóa. </ del>

văn bản gạch ngang

Để chỉ ra các khối văn bản không còn phù hợp sử dụng các <S> tag.

Dòng này của văn bản là có nghĩa là để được coi là không còn chính xác.

Sao chép
<s> Dòng này của văn bản là có nghĩa là để được coi là không còn chính xác. </ s>

văn bản đã chèn

Đối với chỉ bổ sung vào các tài liệu sử dụng <Ins> tag.

Dòng này của văn bản là có nghĩa là để được coi là một sự bổ sung vào tài liệu.

Sao chép
<ins> Dòng này của văn bản là có nghĩa là để được coi là một sự bổ sung vào tài liệu. </ ins>

gạch dưới văn bản

Để gạch dưới văn bản sử dụng <u> tag.

Dòng này của văn bản sẽ làm như gạch chân

Sao chép
<u> Dòng này của văn bản sẽ làm như gạch chân </ u>

Hãy sử dụng các thẻ nhấn mạnh mặc định của HTML với phong cách nhẹ.

văn bản nhỏ

Đối với de-nhấn mạnh nội tuyến hoặc khối văn bản, sử dụng <Nhỏ> thẻ để thiết lập văn bản ở 85% kích thước của phụ huynh. Nhóm các yếu tố nhận riêng mình cỡ chữ cho lồng nhau <Nhỏ> yếu tố.

Hoặc bạn có thể sử dụng một phần tử nội tuyến với .nhỏ ở vị trí của bất kỳ <Nhỏ>.

Dòng này của văn bản là có nghĩa là để được xử lý như chữ in nhỏ.

Sao chép
<small> Dòng này của văn bản là có nghĩa là để được điều trị như chữ in nhỏ. </ small>

Bold

Nhấn mạnh Đối với một đoạn văn bản với một phông chữ nặng hơn trọng lượng.

Đoạn sau của văn bản là rendered in đậm.

Sao chép
<strong> render như văn bản in đậm </ strong>

Chữ in nghiêng

Nhấn mạnh Đối với một đoạn văn bản với chữ in nghiêng.

Đoạn sau của văn bản là kết xuất như văn bản in nghiêng.

Sao chép
<em> render như văn bản in nghiêng </ em>

các yếu tố thay thế

Hãy sử dụng <B> toàn <i> trong HTML5. <B> có nghĩa là để đánh dấu các từ hoặc cụm từ mà không cần thêm Tầm quan trọng trong khi truyền đạt <i> là chủ yếu cho thoại, thuật ngữ kỹ thuật, vv

Lớp Alignment

Dễ dàng sắp xếp lại văn bản với các thành phần liên kết văn bản đến các lớp học.

Còn lại văn bản phù hợp.

Trung tâm liên kết văn bản.

Ngay thẳng văn bản.

văn bản hợp lý.

Không có văn bản bọc.

Sao chép
<p class = "text-left"> văn bản liên kết trái. </ p> <p class = "text-center"> Trung tâm liên kết văn bản. </ p> <p class = "text-right"> văn bản phù hợp phải. </ p> <p class = "text-biện minh"> văn bản Justified. </ p> <p class = "text-nowrap"> Không có văn bản bọc. </ p>

lớp học chuyển đổi

Chuyển đổi văn bản trong các thành phần với các lớp hoa văn bản.

văn bản lowercased.

TEXT UPPERCASED.

Tiêu hoa.

Sao chép
<p class = "text-chữ thường"> văn bản Lowercased. </ p> <p class = "text-hoa"> văn bản Uppercased. </ p> <p class = "text-tận"> văn bản vốn hóa. </ p>

Các từ viết tắt

thực hiện cách điệu của HTML <Abbr> yếu tố cho chữ viết tắt và từ viết tắt để hiển thị các phiên bản mở rộng trên di chuột. Chữ viết tắt với một tiêu đề thuộc tính có một ánh sáng rải rác biên giới phía dưới và một con trỏ giúp đỡ trên di chuột, cung cấp thêm ngữ cảnh trên di chuột và cho người sử dụng công nghệ hỗ trợ.

viết tắt cơ bản

Viết tắt của các thuộc tính từ là attr.

Sao chép
<abbr title = "thuộc tính"> attr </ abbr>

initialism

Thêm .initialism để viết tắt cho một font-size nhỏ hơn một chút.

HTML là điều tốt nhất kể từ khi bánh mì cắt lát.

Sao chép
<abbr title = "HyperText Markup Language" class = "initialism"> HTML </ abbr>

Địa chỉ

thông tin liên lạc hiện tại cho tổ tiên gần nhất hoặc toàn bộ cơ thể của công việc. Bảo tồn các định dạng bằng cách chấm dứt tất cả các dòng với <br>.

Twitter, Inc.
Đường 1355 thị trường, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Họ và tên
first.last@example.com
Sao chép
<address> <strong> Twitter, Inc </ strong> <br> Market Street 1355, Suite 900 <br> San Francisco, CA 94103 <br> <abbr title = "Điện thoại"> P: </ abbr> (123 ) 456-7890 </ address> <address> <strong> Tên đầy đủ </ strong> <a href= <br> "mailto:#"> first.last@example.com </a> </ address>

Blockquotes

Đối với trích dẫn nội dung các khối từ một nguồn khác Trong tài liệu của bạn.

Mặc định blockquote

Quấn <Blockquote> xung quanh bất kỳ HTML như các báo. Đối với dấu ngoặc kép thẳng, chúng tôi khuyến nghị <P>.

Lorem ipsum dolor sit Amet, consectetur adipiscing elit. Integer erat posuere để ante.

Sao chép
<blockquote> <p> Lorem ipsum dolor sit Amet, consectetur adipiscing elit. Integer posuere erat một ante. </ p> </ blockquote>

Tùy chọn Blockquote

Phong cách và nội dung thay đổi cho các biến thể đơn giản trên một tiêu chuẩn <Blockquote>.

Đặt tên một nguồn

Thêm một <Footer> để xác định nguồn gốc. Bọc tên của tác phẩm gốc trong <Cite>.

Lorem ipsum dolor sit Amet, consectetur adipiscing elit. Integer erat posuere để ante.

Có người nổi tiếng trong Nguồn Tiêu đề
Sao chép
<blockquote> <p> Lorem ipsum dolor sit Amet, consectetur adipiscing elit. Integer posuere erat một ante. </ p> <footer> Có người nổi tiếng trong <cite title = "Nguồn Title"> Nguồn Tiêu đề </ cite> </ footer> </ blockquote>

Màn hình thay thế

Thêm .blockquote-ngược cho một blockquote với nội dung phải phù hợp.

Lorem ipsum dolor sit Amet, consectetur adipiscing elit. Integer erat posuere để ante.

Có người nổi tiếng trong Nguồn Tiêu đề
Sao chép
<blockquote class = "blockquote đảo ngược"> ... </ blockquote>

Chức năng

Unordered

Một danh sách các mục theo thứ tự nào không không phải Rõ ràng vấn đề.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Molestie Integer tại lorem massa
  • Facilisis trong pretium Nisl aliquet
  • Nulla velit volutpat aliquam
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • -tiền Đình sem porttitor laoreet
    • Tristique tại libero ac volutpat
  • Faucibus porta Lacus vel Fringilla
  • Aenean erat ngồi Amet nunc
  • Lorem eget porttitor
Sao chép
<ul> <li> ... </ li> </ ul>

Ra lệnh

Một danh sách các mục trong trình tự nào làm Rõ ràng vấn đề.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Molestie Integer tại lorem massa
  4. Facilisis trong pretium Nisl aliquet
  5. Nulla velit volutpat aliquam
  6. Faucibus porta Lacus vel Fringilla
  7. Aenean erat ngồi Amet nunc
  8. Lorem eget porttitor
Sao chép
<ol> <li> ... </ li> </ ol>

Unstyled

Hủy bỏ các mặc định list-style và lề trái trên danh sách các mục (trẻ em ngay lập tức chỉ). Điều này chỉ áp dụng cho các danh sách trẻ em ngay lập tức, Có nghĩa là bạn sẽ cần phải thêm lớp cho bất kỳ danh sách lồng nhau là tốt.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Molestie Integer tại lorem massa
  • Facilisis trong pretium Nisl aliquet
  • Nulla velit volutpat aliquam
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • -tiền Đình sem porttitor laoreet
    • Tristique tại libero ac volutpat
  • Faucibus porta Lacus vel Fringilla
  • Aenean erat ngồi Amet nunc
  • Lorem eget porttitor
Sao chép
<ul class = "list-unstyled"> <li> ... </ li> </ ul>

Inline

Đặt tất cả các mục trong danh sách trên một dòng duy nhất Với display: inline-block; và một số padding ánh sáng.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
Sao chép
<ul class = "list-inline"> <li> ... </ li> </ ul>

Mô tả

Một danh sách các điều khoản liên quan của họ giới thiệu.

Danh sách mô tả
Một danh sách mô tả là hoàn hảo cho việc xác định các điều khoản.
Euismod
Ligula -tiền đình id felis porta sempre Lacinia euismod nec elit eget sem hận thù.
Donec id elit non mi porta gravida tại eget metus.
Malesuada porta
Etiam malesuada mollis porta magna euismod tuần.
Sao chép
<dl> <dt> ... </ dt> <dd> ... </ dd> </ dl>

Mô tả ngang

Hãy ngữ và mô tả trong <dl> xếp hàng side-by-side. Bắt đầu tắt xếp chồng lên nhau như mặc định <dl>s, nhưng khi thanh điều hướng mở rộng, do đó, làm những.

Danh sách mô tả
Một danh sách mô tả là hoàn hảo cho việc xác định các điều khoản.
Euismod
Ligula -tiền đình id felis porta sempre Lacinia euismod nec elit eget sem hận thù.
Donec id elit non mi porta gravida tại eget metus.
Malesuada porta
Etiam malesuada mollis porta magna euismod tuần.
Euismod sempre eget felis Lacinia
Fusce dapibus, COMMODO ac cursus elit, tortor mauris condimentum nibh, ut ngồi Amet fermentum massa chỉ risus.
Sao chép
<class dl = "dl-ngang"> <dt> ... </ dt> <dd> ... </ dd> </ dl>

Tự động cắt xén

danh sách mô tả ngang sẽ cắt ngắn về quá dài để phù hợp ở cột bên trái với text-overflow. Trong khung nhìn hẹp hơn, họ sẽ thay đổi để bố trí mặc định xếp chồng lên nhau.

Bài viết liên quan