Google AMP - Kiểu dáng và CSS tùy chỉnh
Amp hiển thị các trang trên màn hình sau khi cân nhắc kỹ lưỡng. Các trang được tải sẽ chứa hình ảnh, video, iframe, v.v., là những yêu cầu http cần thực hiện nhiều hơn. Vì vậy, yêu cầu http được thực hiện được trì hoãn để nội dung trên trang được hiển thị và cũng là một khoảng trống cần thiết được tạo ra để tải hình ảnh, video, iframe.
Amp có các tính năng như trình giữ chỗ, dự phòng, srcset và thuộc tính bố cục để làm cho các trang đáp ứng và cũng đảm bảo nội dung trên trang không bị xáo trộn. Trong chương này, chúng ta hãy thảo luận chi tiết về tất cả những điều này.
Thẻ phong cách Amp
Amp có một thẻ phong cách với amp-custom trên đó như hình dưới đây -
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
p {
padding: 1rem;
font-size:25px;
}
largeText {
font-size:30px;
background-color:red;
}
</style>Về cơ bản, nó được sử dụng để viết css tùy chỉnh cần thiết cho trang. Xin đừng quên thêmamp-customthuộc tính; nếu không, nó sẽ không thể xác nhận amp như được hiển thị bên dưới -
Amp cũng hỗ trợ css nội tuyến cho các phần tử html như hình dưới đây -
<div style = "color:green;margin-left:30px;">
Welcome to TutorialsPoint</p>Thẻ biểu định kiểu bên ngoài
Amp không hỗ trợ biểu định kiểu bên ngoài và sẽ không thể xác thực khi được xác thực cho amp.
Thí dụ
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Dynamic Css Classes</title>
<link rel = "canonical" href = "
http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body {
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-bind" src = "
https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-element = "amp-dynamic-css-classes"
src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
</script>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.9 8.0/css/materialize.min.css">
<style amp-custom>
p {
padding: 1rem;
font-size:25px;
}
</style>
</head>
<body>
<h3>Google AMP - Dynamic Css Classes</h3>
<div style = "color:green;margin-left:30px;">
Welcome to TutorialsPoint</p>
</body>
</html>Khi được xác thực bằng trình xác thực AMP , chúng tôi gặp lỗi sau.
Để hiển thị các phần tử trong trang một cách phản ứng, các phần tử amp cần chỉ định chiều rộng và chiều cao mà phần tử sẽ sử dụng trên trang. Thêm layout = “responsive” sẽ làm cho phần tử đáp ứng trên trang duy trì tỷ lệ khung hình.
Các chi tiết của thuộc tính layout được thảo luận chi tiết trong chương Google AMP – Layout.